Javascript 将状态设置为父级

我无法使用setState更改父级的状态。首先，我的RootView.jsx包含：

constructor(props) {
        super(props);
        this.state = {
sizes: [
                {label: "90x50mm", isChecked: false, number: 10},
                {label: "85x55mm", isChecked: false, number: 12}
            ],
            ratings: [
                {label: "OneStar", isChecked: false, imgSrc: 'images/Rating1Star.svg', counter: 22},
                {label: "TwoStars", isChecked: false, imgSrc: 'images/Rating2Stars.svg', counter: 18},
                {label: "ThreeStars", isChecked: false, imgSrc: 'images/Rating3Stars.svg', counter: 34},
                {label: "FourStars", isChecked: false, imgSrc: 'images/Rating4Stars.svg', counter: 27}
            ],
            favorites: [
                {label: "Only favorites", isChecked: false, number: 12}
            ]
}

及

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

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()}
                    />
                )
            })
        )

返回(
this.props.size.map（（size，idx）=>{
返回(
)
})
)

使用我的复选框组件，其中我有：

 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>
        )
    }

render（）{
返回(
{this.props.label}
{this.props.number}
)
}

通过onClick，我想更改RootView.jsx中数组中一个元素的isChecked状态

---

可能吗？

是的，您需要传递创建复选框元素时所使用的数组元素的索引

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)}
                    />
                )
            })
        )

---

我希望它能帮助您解决问题

是的，您需要传递创建checkbox元素所使用的数组元素的索引

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)}
                    />
                )
            })
        )

---

---

我希望它能帮助您解决问题

您想为每个阵列更新ischecked吗？不，只针对单击的这一个元素，但ischecked是内部大小、评级和偏好，但对于每个阵列中的每个元素，我都会创建一个复选框（第一个是“90x50mm”，第二个是“85x55mm”等）我想在每次点击一个元素时只改变一个元素的isChecked状态你想为每个数组更新isChecked吗？不，只对点击的这一个元素进行isChecked，但isChecked包含大小、评级和偏好，但对于每个数组中的每个元素，我都会创建一个复选框（第一个是“90x50mm”，第二个是“90x50mm”85x55mm’等），我想在每次单击一个元素时只更改一个元素的isChecked状态谢谢，但此解决方案只解决了该问题的一部分，而不是整个问题。我不想只为sizes数组中的项更改isSelected的状态。我有几个带有不同过滤器的阵列，你可以从阵列大小、阵列评级或其他几个方面单击过滤器，我希望它能与我的所有阵列一起工作。。。希望这是可以理解的，我知道你也可以为其他阵列做类似的事情。我希望可能有某种方法可以让这个功能对每个数组起作用，所以我只需要其中的一个而不是5或10个。您可以做的是为复选框定义一个属性，告诉它属于哪个数组，然后在_setProps函数中，您可以执行类似于对大小数组执行的条件操作。如果有帮助，请告诉我you@ShubhamKhatri不幸的是，我不知道为什么，但您的解决方案不起作用。我不得不稍微修改一下，但仍然收到错误：无法读取未定义的属性'isChecked'，下面是我的代码：_setProps（idx）{var size=this.state.size；size[idx]。isChecked=！size[idx].isChecked；谢谢，但此解决方案只解决了该问题的一部分，而不是整个问题。我不想更改isSelected的状态，仅针对sizes数组中的项。我有几个具有不同筛选器的数组，您可以从数组大小、数组评级或其他几个方面单击筛选器，我希望它能与我的所有数组一起工作。…希望这是可以理解的您也可以对其他数组执行类似操作，我知道。我希望可能有某种方法可以使此功能适用于每个数组，因此我只需要一个而不是5个或10个。您可以做的是为复选框定义一个属性，告诉它属于哪个数组，然后在_setProps函数中可以pe重新格式化条件操作，类似于对大小数组所做的操作。如果有帮助，请告诉我you@ShubhamKhatri不幸的是，我不知道为什么，但您的解决方案不起作用。我不得不对其进行一点更改，但仍然收到错误：无法读取未定义的属性“isChecked”，以下是我的代码：_setProps（idx）{var size=this.state.size；size[idx].isChecked=！size[idx].isChecked；

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
    });
}