反应：如何pipe理多种inputtypes的状态

在页面上显示网球选手详细信息的POC中，可以显示“n”个选手。 用户可以同时更新所有玩家的信息。

书面3个组件PlayersPage，PlayerTable和PlayerRow。 当玩家信息在PlayerRow中更新时，我对如何更新PlayersPage中的状态（playerData）感到困惑。 任何指针/链接将有所帮助。

以下是代码：

class PlayersPage extends React.Component { constructor(props) { super(props); this.state = { playerData: [ { "dataKey": "300", "playerFirstName": "Roger", "playerLastName": "Federer", "playerRanking": "1" }, { "dataKey": "301", "playerFirstName": "Rafael", "playerLastName": "Nadal" "playerRanking": "2" } ] }; } render() { return ( <div className="container"> <PlayerTable tableData={this.state.playerData} />; </div> ); } } class PlayerTable extends React.Component { render() { const rows = []; this.props.tableData.forEach((rowData) => { rows.push(<PlayerRow key={rowData.dataKey} rowData={rowData} />); }); return ( <div className="table-responsive"> <table className="table table-condensed"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ranking</th> </tr> </thead> <tbody> {rows} </tbody> </table> </div> ); } } PlayerTable.propTypes = { tableData: PropTypes.array.isRequired }; class PlayerRow extends React.Component { render() { return ( <tr> <td><input type="text" value={this.props.rowData.playerFirstName} /></td> <td><input type="text" value={this.props.rowData.playerLastName} /></td> <td><input type="text" value={this.props.rowData.playerRanking} /></td> </tr> ); } } PlayerRow.propTypes = { rowData: PropTypes.object.isRequired }; 

Answer 1

 class PlayersPage extends React.Component { constructor(props) { super(props); this.changeRecord = this.changeRecord.bind(this); this.state = { playerData: [ { "dataKey": "300", "playerFirstName": "Roger", "playerLastName": "Federer", "playerRanking": "1" }, { "dataKey": "301", "playerFirstName": "Rafael", "playerLastName": "Nadal", "playerRanking": "2" } ] }; } changeRecord(record, event) { console.log(event.currentTarget.value); console.log(record); this.setState({ // Write your logic to update the playerDate value accordingly }); } render() { return ( <div className="container"> <PlayerTable recordChangeHandler={this.changeRecord} tableData={this.state.playerData} />; </div> ); } } class PlayerTable extends React.Component { render() { const rows = []; this.props.tableData.forEach((rowData) => { rows.push(<PlayerRow recordChangeHandler={this.props.recordChangeHandler} key={rowData.dataKey} rowData={rowData} />); }); return ( <div className="table-responsive"> <table className="table table-condensed"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ranking</th> </tr> </thead> <tbody> {rows} </tbody> </table> </div> ); } } class PlayerRow extends React.Component { render() { return ( <tr> <td><input type="text" onChange={this.props.recordChangeHandler.bind(this, this.props.rowData)} defaultValue={this.props.rowData.playerFirstName} /></td> <td><input type="text" onChange={this.props.recordChangeHandler} defaultValue={this.props.rowData.playerLastName} /></td> <td><input type="text" onChange={this.props.recordChangeHandler} defaultValue={this.props.rowData.playerRanking} /></td> </tr> ); } } ReactDOM.render( <PlayersPage />, document.getElementById('container') ); 

检出您可能在您的POC应用程序中模拟的JSFiddle示例。 https://jsfiddle.net/69z2wepo/86736/

Answer 2

通过道具传递数据可以实现组件通信。

看看这个链接 ，具体是第3节。

你如何将孩子的数据发送给父母？

最简单的方法是让父母将一个function传递给孩子。 孩子可以使用该function与父母沟通。

父母会把一个function作为一个道具传递给孩子，像这样：

 <MyChild myFunc={this.handleChildFunc.bind(this)} /> 

孩子会这样调用这个函数：

 this.props.myFunc(); 

不要忘记，孩子将需要在propTypes中声明的这个函数：

 MyChild.propTypes = { myFunc: React.PropTypes.func, };