В процессе работы с ReactJS часто возникает необходимость использования радиокнопок. Задача может стать сложнее, когда данные для этих радиокнопок приходят динамически, например, из массива, и они должны отображаться в таблице. Кроме того, по условию задачи, выбранное значение должно отображаться в подвале таблицы.
Представим типичную ситуацию, когда у нас есть компонент, который создает несколько строк таблицы в зависимости от полученных данных. Каждая ячейка в столбце имеет радиокнопку. Таким образом, пользователь может выбрать одно site_name и один address из существующих строк.
Допустим, у нас есть следующий код:
var SearchResult = React.createClass({
render: function () {
var resultRows = this.props.data.map(function (result) {
return (
<tbody>
<tr>
<td>
<input type=»radio» name=»site_name» value={result.SITE_NAME}>
{result.SITE_NAME}
</input>
</td>
<td>
<input type=»radio» name=»address» value={result.ADDRESS}>
{result.ADDRESS}
</input>
</td>
</tr>
</tbody>
);
});
return (
<table className=»table»>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
{resultRows}
<tfoot>
<tr>
<td>chosen site name ???? </td>
<td>chosen address ????? </td>
</tr>
</tfoot>
</table>
);
},
});
В jQuery можно было бы сделать что-то вроде $("input[name=site_name]:checked").val() для получения выбора одного типа радиокнопки и вставить его в первую ячейку подвала.
Однако в ReactJS подход к решению этой задачи будет иной. Вместо того, чтобы использовать селекторы и обращаться к DOM напрямую, React предоставляет набор средств для работы с состоянием компонента.
class SearchResult extends React.Component {
constructor(props) {
super(props);
this.state = {
siteName: »,
address: »
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
const resultRows = this.props.data.map(result => (
<tr>
<td>
<input
type=»radio»
name=»siteName»
value={result.SITE_NAME}
onChange={this.handleChange}
/>
{result.SITE_NAME}
</td>
<td>
<input
type=»radio»
name=»address»
value={result.ADDRESS}
onChange={this.handleChange}
/>
{result.ADDRESS}
</td>
</tr>
));
return (
<table className=»table»>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>{resultRows}</tbody>
<tfoot>
<tr>
<td>{this.state.siteName}</td>
<td>{this.state.address}</td>
</tr>
</tfoot>
</table>
);
}
}
Таким образом, мы используем событие onChange для каждого радиокнопки, чтобы обновить состояние компонента при выборе определенной радиокнопки. В подвале таблицы мы просто отображаем соответствующие значения из состояния. Это позволяет нам динамически обновлять выбранные значения в реальном времени.
Добавить комментарий