在React中的特定組件上設置狀態

Question

我在一頁上有許多相同的組件呈現，我的用戶可以根據需要添加更多相同的子組件。 當他們在子組件的form元素內選擇日期時，我只想更改他們選擇的子組件的日期。 目前，它更改了屏幕上所有子組件的日期，有人可以看到我要去哪里了嗎？

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

我只想更改他們選擇的子組件的日期。

然后，子組件應將date保留為其狀態，或者使父組件將所有子組件中的日期保留在數組中。