Question

我在一个页面上有许多相同的组件渲染，我的用户可以根据需要添加更多相同的子组件。当他们在子组件的表单元素中选择日期时，我只想更改他们选择的子组件的日期。目前它改变了屏幕上所有子组件的日期，任何人都可以看到我出错的地方吗？

class ParentFixturesComponent extends Component {

    constructor() {
        super();
        this.state = {
            numChildren: 0,
            startDate: moment(),
            id: uuid()
        };
    }

    changeDate(newDate) {
        this.setState({
            startDate: newDate
        });
    }

    onAddMatch() {
        this.setState({
            numChildren: this.state.numChildren + 1
        });
    }

    render() {
        const children = [];
        for (let i = 0; i < this.state.numChildren; i += 1) {
            children.push(<SingleMatchForm startDate={this.state.startDate}
                                           key={this.state.id}
                                           changeDate={this.changeDate.bind(this)}
            />)
        }

        return (
            <Fixtures addMatch={this.onAddMatch.bind(this)}>
                {children}
            </Fixtures>
        );
    }

}

export default ParentFixturesComponent;

子组件

class SingleMatchForm extends Component {

    handleChange(params) {
        this.props.changeDate(params);
    }

    render() {
        return (
            <div className="row">
                <div key={this.props.id} className="form-group">
                    <label className="control-label col-md-2">New Match</label>
                    <div className="col-md-6">
                        <DatePicker
                            selected={this.props.startDate}
                            onChange={this.handleChange.bind(this)}/>
                        <div className="section-divider mb40" id="spy1"> </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default SingleMatchForm;

Answer 1

原因是，您使用单个state变量来保存所有子组件的日期值，如果更新单个state值，它将影响所有组件。要解决此问题，请使用array而不是单个值。

像这样：

this.state = {
    numChildren: 0,
    startDate: [],  //array
    id: uuid()
};

现在为每个子组件使用此array的每个值，并在onChange方法中绑定索引以更新特定值，如下所示：

children.push(<SingleMatchForm startDate={this.state.startDate[i] || moment()}
                                           key={this.state.id}
                                           changeDate={this.changeDate.bind(this, i)}
            />)

在onChange方法中更新特定值而不是所有值：

changeDate(i, newDate) {
    let startDate = this.state.startDate.slice();
    startDate[i] = newDate;
    this.setState({
        startDate
    });
}

Answer 2

我只想更改他们选择的子组件的日期。

然后子组件应该以{{1}}作为其状态，或者让父组件在所有子组件的数组中保存日期。

在React中设置特定组件的状态

2 个答案: