javascript - React JS - 在选择值更改时更新用户信息

Question

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

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

我有一个从 API 获取 JSON 的 componentDidMount。

我有一个渲染函数，可以设置一些变量并生成一些 JSX 代码，这会返回一个表，其中包含从 json api 获取的客户端数据，并包括一个带有从 api 加载的选项的选择菜单。

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

当前发生的情况 当选择值更改为(例如)团队 1 时，所有选择都更改为“团队 1”，而不仅仅是那 1 条记录。

我想做的只是更新 1 条记录，然后还能够返回 User.ID 以及新的选择值(对于 1 条记录)，这样我就可以更新API(我知道如何发回数据，它只是获取要发布的正确值)。

我的代码如下:

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

如果您想为所有行创建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调用在这里。