反应-处理表中的多个SelectField [英] React - Handle Multiple SelectField in table

问题描述

我试图在表内以动态方式设置每个selectField的值。到目前为止，这是我的代码，问题是当我更改一个selectField时，它会更改所有这些内容，并且我无法弄清楚如何使其按预期工作，仅更新了所选的一个

Im trying to set the value of each selectField in a dynamic way inside a table. Here is my code so far, the problem is when i change one selectField it changes all of them and i cannot figure out how to make it to work as expected, only updated the one selected

import {
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn,
} from 'material-ui/Table';

const months = [];
for (let i = 1; i <= 12; i++) {
    months.push(<MenuItem value={i} key={i} primaryText={`${i}`} />);
}
class Month extends Component {
    handleMonth = (value) => {
        this.setState({
            month: value
        });
    };
render() {
    return
    <Table selectable={false}>
        <TableHeader
            displaySelectAll={false}
            adjustForCheckbox={false}>
            <TableRow>
                <TableHeaderColumn>Meses</TableHeaderColumn>
            </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false} >
            {itemsMonths.map((row, index) => (
                <TableRow key={row.id}>
                    <TableRowColumn>
                        <SelectField
                            value={this.state.month}
                            onChange={this.handleMonth}>
                            {months}
                        </SelectField>
                    </TableRowColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>

}

有人可以帮助我吗？

推荐答案

原因是您要通过单个状态值控制所有Selectfield，因此，当您更改该状态值时，它将在所有Selectfield中进行更改。

Reason is you are controlling all the Selectfield by a single state value, so when you are changing that state value, it is doing the changes in all the Selectfields.

解决方案：

不使用单一状态使用数组，而是使用每个Selectfield的值，并仅更新特定值，而不更新所有值。

Instead of using a single state use array, on value of each Selectfield, and update only specific value not all the values.

步骤1：将月定义为构造函数中的数组：

Step 1: Define month as an array in constructor:

constructor(){
   super();
   this.state = {month: []}
}

步骤2：为Selectefields使用特定值（每个字段一个值）：

Step 2: Use specific value (one value for each field) for Selectefields:

<SelectField
    value={this.state.month[index] || null}
    ....

步骤3：通过onChange函数中每个SelectField的索引以更新数组的特定值：

Step 3: Pass index of each SelectField in onChange function to update the specific value of array:

<SelectField
    ....
    onChange={this.handleMonth.bind(this, index)}>
    {months}
</SelectField>

步骤4：在onChange函数中更新特定值：

Step 4: Update the specific value in onChange function:

handleMonth(index, value){
    let month = [...this.state.month];     //or this.state.month.slice(0)
    month[index] = value;
    this.setState({ month });
}

完整代码：

class Month extends Component {

    constructor(){
        super();
        this.state = {
            month: []
        }
    }

    handleMonth(index, value){
        let month = [...this.state.month];
        month[index] = value;
        this.setState({ month });
    }

    render() {
        return(
            <Table selectable={false}>
                ....

                <SelectField
                    value={this.state.month[index] || null}
                    onChange={this.handleMonth.bind(this, index)}>
                    {months}
                </SelectField>

                ....
            </Table>
        )
    }
}

这篇关于反应-处理表中的多个SelectField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！