Question

在POC上工作，在页面中显示网球运动员的详细信息。可以在＆＃39; n＆＃39;显示的球员数量。用户可以同时更新所有玩家的信息。

写入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

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

查看此link，特别是第3节。

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

最简单的方法是让父母将一个功能传递给孩子。孩子可以使用该功能与其父母进行交流。

父母会将一个函数作为道具传递给孩子，如下所示：

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

孩子会这样称呼这个函数：

this.props.myFunc();

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

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

Answer 2

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/

React：如何管理多种输入类型的状态

2 个答案: