Question

我有一个做得相当多的组件 - 可能不是最好的做法，但这是我的第一个反应应用程序，所以一旦我完成所有工作，我可能会回去重构一些零碎的东西。

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

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

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

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

当前发生的事情当选择值更改为（例如）第1组时，所有选项都会更改为＆＃39;第1组＆＃39;而不只是那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将是一个数组，每个值都会存储每个state的{{1}} -

select

使用此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电话。

Answer 2

这样的东西？（原谅任何错误，没有测试过）

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;

React JS - 更新有关选择值更改的用户信息

2 个答案: