Question

我正在开发带有反应的Web应用程序。

我想在复选框上动态设置'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”必须是一个数组。

希望有帮助

我如何以编程方式设置复选框属性'checked'或'defaultChecked'in react

3 个答案: