时间戳

首页 > 解决方案 > 我如何在反应中以编程方式设置复选框属性“已检查”或“默认检查”

javascript - 我如何在反应中以编程方式设置复选框属性“已检查”或“默认检查”

问题描述

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

我想在复选框上动态设置“已检查”属性。

它显示了我想要的正确屏幕，但当我以编程方式设置“已检查”属性时无法正常工作。

所以，我已经搜索过这个。

有些人建议使用“defaultChecked”属性。

蚂蚁然后我尝试了这个。但失败了。

当我给出以编程方式设置检查属性的事件时，它没有改变。它总是显示 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 } />
        );
    }
}

标签： javascriptreactjscheckboxchecked

解决方案

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

我是这样解决的：

                {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”必须是一个数组。

希望能帮助到你

推荐阅读