React JS - 在 select 值更改时更新用户信息

Question

我有一个 组件，它做了很多事情——可能不是最佳实践，但这是我的第一个 React 应用程序，所以一旦一切正常，我可能会回去重构点点滴滴。

我有一个设置状态的构造函数。

我有一个 componentDidMount 从 API.

获取 JSON

我有一个渲染函数，它设置了一些变量并生成了一些 JSX 代码，这个 return 是一个 table，客户端数据取自 json api 和包括一个 select 菜单，其中包含从 api.

加载的选项

我有一个事件处理程序，它在用户更改 select 值时运行 onChange。

当前发生的情况 当 select 值更改为（例如）团队 1，然后所有 select 更改为 'Team 1' 而不仅仅是那 1 条记录。

我正在尝试做的 只是更新 1 条记录，然后还能够 return User.ID 以及新的 select 值（对于 1 条记录），这样我就可以更新 API（我知道如何 post 返回数据，它只是将正确的值设为 post）。

我的代码如下：

import React from 'react';

class GetUnassignedUsers extends React.Component {
    constructor () {
        super();
        this.state = {
            data:{unassignedUsers:[],teams:[]},
            selectValue: '8'
        };
    }
    componentDidMount () {
        fetch("http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", {
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then( (json) => {
            this.setState({
                data: json
            });
        });
    }
    handleChange (event) {
        alert(this.state);
        this.setState({
            selectValue: event.target.value
        });
    }
    render () {
        let unassignedUsers = this.state.data.unassignedUsers;
        let teams = this.state.data.teams;
        let availableTeams = teams.map(function (team) {
            return (
                <option value={team.id}>{team.team_name}</option>
            )
        });
        let select = (
            <select value={this.state.selectValue} onChange={this.handleChange.bind(this)}>
                {availableTeams}
            </select>
        );
        let rows = unassignedUsers.map(function (user) {
            return (
                <tr>
                    <td>{user.ID}</td>
                    <td>{user.dateCreated}</td>
                    <td>{user.company}</td>
                    <td>{user.email}</td>
                    <td>{user.contactName}</td>
                    <td>{user.quoteDomain}</td>
                    <td>{user.InvoicePostCode}</td>
                    <td>
                        {select}
                    </td>
                </tr>
            )
        });
        return (
            <tbody>
                {rows}
            </tbody>
        );
    }
}

export default GetUnassignedUsers;

Answer 1

是这样的吗？（请原谅任何错误，还没有测试过）

import React from 'react';

class GetUnassignedUsers extends React.Component {
    constructor () {
        super();
        this.state = {
            data:{unassignedUsers:[],teams:[]},
            selectValue: '8'
        };
    }
    componentDidMount () {
        fetch("http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", {
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then( (json) => {
            this.setState({
                data: json
            });
        });
    }
    handleChange (index, event) {
        alert(this.state);
        this.state.data.unassignedUsers[index].selectValue = event.target.value;
        this.state.forceUpdate();

    }
    render () {
        let unassignedUsers = this.state.data.unassignedUsers;
        let teams = this.state.data.teams;
        let availableTeams = teams.map(function (team) {
            return (
                <option value={team.id}>{team.team_name}</option>
            )
        });
        let select = (

        );
        let rows = unassignedUsers.map(function (user, index) {
            return (
                <tr>
                    <td>{user.ID}</td>
                    <td>{user.dateCreated}</td>
                    <td>{user.company}</td>
                    <td>{user.email}</td>
                    <td>{user.contactName}</td>
                    <td>{user.quoteDomain}</td>
                    <td>{user.InvoicePostCode}</td>
                    <td>
                        <select value={user.selectValue} onChange={this.handleChange.bind(this, index)}>
                            { availableTeams }
                        </select>
                    </td>
                </tr>
            )
        });
        return (
            <tbody>
                {rows}
            </tbody>
        );
    }
}

export default GetUnassignedUsers;

Answer 2

如果你想为所有行创建 select 那么你需要为所有行单独创建它们，并且需要一个单独的 state 变量来存储更改的值，试试这个它会起作用。

检查 jsfiddle 工作示例：https://jsfiddle.net/hmm47qLg/

selectValue会是一个数组，每个值会存储每个select-

的state

constructor () {
    super();
    this.state = {
        data:{unassignedUsers:[],teams:[]},
        selectValue: []
    };
}

使用这个render方法，它会为每一行创建select-

render () {
    let unassignedUsers = this.state.data.unassignedUsers;
    let teams = this.state.data.teams;
    let availableTeams = teams.map((team,i)=> {
        return (
            <option key={i} value={team.id}>{team.team_name}</option>
        )
    });
    //let select = (
    //    <select value={this.state.selectValue} onChange={this.handleChange.bind(this)}>
    //        {availableTeams}
    //    </select>
    //);
    let rows = unassignedUsers.map((user, i)=> {
        return (
            <tr key={i}>
                <td>{user.ID}</td>
                <td>{user.dateCreated}</td>
                <td>{user.company}</td>
                <td>{user.email}</td>
                <td>{user.contactName}</td>
                <td>{user.quoteDomain}</td>
                <td>{user.InvoicePostCode}</td>
                <td>
                    <select value={this.state.selectValue[i]} onChange={this.handleChange.bind(this, user, i)}>
                        {availableTeams}
                    </select>
                </td>
            </tr>
        )
    });
    return (
        <table>
            <tbody>
                {rows}
            </tbody>
        </table>
    );
}

内部 onChange 方法传递用户 object 和行的 index-

handleChange(user, index, e){
    console.log('user', user, e.target.value);
    let selectValue = this.state.selectValue;
    selectValue[index] = e.target.value;
    this.setState({selectValue});
}

在onChange方法中你有完整的user对象，如果你想发送数据到服务器，你可以在这里写api调用。

React JS - 在 select 值更改时更新用户信息

React JS - Update user information on select value change

javascript

json

reactjs

react-jsx