如何以编程方式设置react中的checked或defaultChecked checked属性

Question

我正在用react开发web应用程序。

我想在checkbox上动态设置“checked”属性。

它显示了一个我想要的正确的屏幕，但当我以编程方式设置'checked‘属性时，它不起作用。

因此，我对此进行了搜索。

有些人推荐使用“defaultChecked”属性。

然后我试了一下。但是失败了。

当我给出了以编程方式设置checked属性的事件时，它没有改变。它总是显示defaultChecked值。

源代码

render() {
list = {
 resource: {[...], [...] },
 ...
}
return (
<ParameterContainer values={ list } />
);
}

    class ParameterContainer extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        const { values } = this.props;
        return (
            <div className="parameter-table">
                <div className="parameter-row-container">
                    <ul className="parameter-row title">
                        <li className="parameter parameter-1">valid</li>
                        <li className="parameter parameter-2">Key</li>
                        <li className="parameter parameter-3">Type</li>
                        <li className="parameter parameter-4">oid</li>
                        <li className="parameter parameter-5">rid</li>
                        <li className="parameter parameter-6">desc</li>
                    </ul>
                    {
                        values.resource.map((value, i) => {//one row
                            return (
                                <ParameterItem value={ value } index={ i } key={ i }/>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}

class ParameterItem extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        const { value, index } = this.props;
        const items = [];

        for (let o in value) {
            if (o === "valid") {
                continue;
            }
            items.push(value[o]);
        }
        return (
            <ul className={`parameter-row parameter-row-${ index+1 }`}>
                <li className="parameter parameter-1">
                    <input type="checkbox" defaultValue={ value.valid } checked={ value.valid } onChange={ this.toggle }/> //i tried to this.
                    <Checkbox isChecked={ value.valid } /> // and then tried this...
                </li>
            </ul>
        );
    }

    toggle(e) {
        $(e.target).prop("checked", e.target.checked ? 0 : 1);
    }
}

class Checkbox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: !!this.props.isChecked
        };
    }

    handleChange = (e) => {
        const { target: { checked }} = e;
        this.setState({ checked });
    }

    render() {
        return (
            <input type="checkbox" checked={ this.state.checked } onChange={ this.handleChange } />
        );
    }
}

Answer 1

复选框输入中的onChange方法缺少活页夹。

试试这个：onChange={this.handleChange.bind(this)}。

在这里可以找到关于.bind(this)用法的更多解释：Handling events

Answer 2

您正在寻找受控组件，其中组件的值由状态指定，并通过onchange处理程序进行更新。查看https://reactjs.org/docs/forms.html#controlled-components

Answer 3

我也遇到过类似的问题。我想列出一组复选框，但其中一些可能已经被选中。

我是这样解决的：

                {this.props.checkboxesList.map(e => (
                  <CustomInput
                    type="checkbox"
                    key={e.id}
                    id={e.id}
                    name={e.nombre}
                    label={e.nombre}                        
                    defaultChecked={
                      this.props.form.selected.filter(
                        item => item.id === e.id
                      ).length === 0
                        ? false
                        : true
                    }
                    onChange={this.props.onCheckBoxChange}
                  />
                ))}

注释：CustomInput来自“reactstrap”

我的"onCheckBoxChange“看起来像这样：

   handleCheckBoxChange = e => {
let options = this.state.form.selectedOptions;
if (e.target.checked) {
  options.push({ id: e.target.id, nombre: e.target.name });
} else {
  options = options.filter(item => item.id !== e.target.id);
}
this.setState({
  form: {
    ...this.state.form,
    selectedOptions: options
  }
});};

要考虑到"state.from.selectedOptions“必须是一个数组。

希望能有所帮助