javascript - 我想在屏幕上实时打印复选框的状态

Question

基本上现在我每次使用新值检查复选框时都会在控制台中打印一个新数组，例如：Results [true, false, false]; = 如果第一个是唯一选中的复选框。

现在我想在 SimpleCard 反应组件中显示相应的文本，但每次它必须相应地更改为每次我选择或取消选择其中一个复选框时创建的新数组。例如：第一个已检查，第二个未检查，第三个未检查，依此类推...

希望我能够向您解释。

    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
        //this.showlive = this.showlive.bind(this)

        const checkboxList = [
            {
                id: "blu",
                name: "blu",
                value: "blu",
                dimension: "sm",
                label: "blu",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            },
            {
                id: "red",
                name: "red",
                value: "red",
                dimension: "sm",
                label: "red",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: true }
            },
            {
                id: "yellow",
                name: "yellow",
                value: "yellow",
                dimension: "sm",
                label: "yellow",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            }
        ]

        this.state = {
            error: null,
            checkboxList: checkboxList

        }
    };

    componentDidMount() {
  
    }

    onChange(event) {
        const checkboxList = this.state.checkboxList.map((elem) => {
            if (elem.name === event.target.name)
                elem.extraProps.checked = event.target.checked
            return elem
            
            
        })

        this.setState({ 
            checkboxList: checkboxList,
            SimpleCard: Body })
    }

    render(){

        let i;
        let Risultati = [];

        for(i=0; i<3; i++){
            let v = this.state.checkboxList[i].extraProps.checked;
            Risultati.push(v)
            return Risultati; 
        }
        
        console.log(Risultati);

        const legend = "Checkbox"

        return (
            <div>
                <Checkbox
                    checkboxList={this.state.checkboxList}
                    legend={legend}
                ></Checkbox>

                <SimpleCard
                    title="Colors selected"
                    titleHeading="h2"
                    data={<p> Data</p>}
                    body={ <p> Here I want the text to be displayed </p>}
                >
                    {" "}
                </SimpleCard>
            </div>
        );
    };
};

标签： javascriptreactjscheckboxstateonchange

Answer 1

我认为，您的变量“checkboxList”处于状态，反应无法检测到更改。

像这样怎么样。

    this.setState({ 
          checkboxList: [...checkboxList],
          SimpleCard: Body 
    })