Javascript — React JS отображать данные после отправки

Question

Javascript — React JS отображать данные после отправки

Ниже приведен мой код реакции, который принимает данные в формате json и печатает

          var DataInTableFormat = React.createClass({
getInitialState: function() {
return {
phpData: [] //initial value
};//getInitialState
},//DataInTableFormat
componentDidMount: function() {
$.get(this.props.source, function(result) { //storing the JSON data in result
var collection = JSON.parse(result);  //coverting JSON data to Javascript object
console.log(collection);
if (this.isMounted()) {//checking for component mount
this.setState({
phpData: collection

});
}
}.bind(this));
},

render:function()
{

DBdata = this.state.phpData || [];
return (
<form>
<div>Select ID :
<select>
{DBdata.map(function(d){
return(
<option value={d.id}>{d.id}</option>//prints the all id from the jsondata.php
)}
)}
</select>
<button name="submit">submit</button>
</div>
</form>
)}
});
React.render(
<DataInTableFormat source="http://localhost/PHP-React-Demo/jsondata.php" />,
document.getElementById('Table-data')
);

Когда я выбираю идентификатор, я просто хочу напечатать все детали в табличном формате после нажатия на кнопку отправить.

0

javascript php reactjs

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вам нужно сделать следующее:

Определить onChange обработчик на <select> элемент.
```
<select onChange={this.handleChange}>
```
Добавьте обработчик событий в определение вашего компонента и используйте его для изменения состояния экземпляра компонента.
```
handleChange: function (event) {
this.setState({
currentId: event.target.value
});
}
```

Используйте этот кусок состояния в render() метод.

render: function () {

var currentId = this.state.currentId;
var phpData = this.state.phpData || [];
var selected = phpData.filter(function (item) {
return item.id === currentId;
});

if (selected.length > 0) {
// return stuff relating to selected[0]
}

0