javascript - react : How to manage state for multiple input types

Question

正在开发一个在页面中显示网球运动员详细信息的 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/