Question

我在使用setState更改父级的状态时遇到问题。首先我将RootView.jsx用于：

_setProps() {
    this.setState({
        isChecked: !this.state.isChecked
    });
}

和

return (
            this.props.sizes.map((size, idx) => {
                return (
                    <Checkbox
                        key={"size"+idx}
                        label={size.label}
                        checked={size.isChecked}
                        number={size.number}
                        _setProps={size.props._setProps()}
                    />
                )
            })
        )

然后对于所有元素我在不同的组件中创建复选框，例如：

 render () {
        return (
            <div className="Checkbox">
                <form>
                    <input
                        type="checkbox"
                        id="check"
                        onClick={this.props._setProps.bind(this)}
                    />
                    <img src={this.props.imgSrc}/>
                    <label htmlFor="check" id="label">{this.props.label}</label>
                    <label htmlFor="check" id="number">{this.props.number}</label>
                </form>
            </div>
        )
    }

使用我的Checkbox组件，我有：

{{1}}

使用我的onClick我想在RootView.jsx中更改数组中一个元素的isChecked状态

有可能吗？

Answer 1

是的，您需要传递使用

创建复选框元素的数组元素的索引

return (
            this.props.sizes.map((size, idx) => {
                return (
                    <Checkbox
                        key={"size"+idx}
                        index={idx}
                        label={size.label}
                        checked={size.isChecked}
                        number={size.number}
                        _setProps={this.props._setProps.bind(this)}
                    />
                )
            })
        )

在复选框组件中，将此索引作为参数发送

render () {
    return (
        <div className="Checkbox">
            <form>
                <input
                    type="checkbox"
                    id="check"
                    onClick={this.props._setProps.bind(this, this.props.index)}
                />
                <img src={this.props.imgSrc}/>
                <label htmlFor="check" id="label">{this.props.label}</label>
                <label htmlFor="check" id="number">{this.props.number}</label>
            </form>
        </div>
    )
}

并按以下方式更改状态

_setProps(idx) {
    var sizes = this.state.sizes;
    sizes[idx]["ischecked"] = !sizes[idx]["ischecked"];
    this.setState({
        sizes: sizes
    });
}

我希望它可以帮助您解决问题

SetState为父级

1 个答案: