javascript - 将状态设置为父级

Question

我在使用 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}
            ]
}

和

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

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

希望能帮助你解决问题