我有麻烦更新复选框的状态后,它被分配的默认值checked=“checked”在React。

var rCheck = React.createElement('input',
    {
        type: 'checkbox',
        checked: 'checked',
        value: true
    }, 'Check here');

在分配checked="checked"后,我无法通过单击取消选中/选中来交互复选框状态。


当前回答

如果有人想处理具有多行的动态数据,这是用于处理动态数据的。

你可以检查rowId是否等于0。

如果它等于0,那么您可以将布尔值的状态设置为true。

interface MyCellRendererState {
    value: boolean;
}
constructor(props) {
        super(props);
        this.state = {
            value: props.value ? props.value : false
        };
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }
handleCheckboxChange() {
        this.setState({ value: !this.state.value });
    };
render() {
        const { value } = this.state;
        const rowId = this.props.rowIndex
        if (rowId === 0) {
           this.state = {
             value : true }
        }
        return ( 
          <div onChange={this.handleCheckboxChange}>
            <input 
            type="radio" 
            checked={this.state.value}
            name="print"
            /> 
          </div>
         )
      }

其他回答

在React呈现生命周期中,表单元素上的value属性 将覆盖DOM中的值。对于一个不受控制的组件, 你通常希望React指定初始值,但留下 后续更新不受控制。要处理这种情况,您可以指定 使用defaultValue或defaultChecked属性代替value。

        <input
          type="checkbox"
          defaultChecked={true}
        />

Or

React.createElement('input',{type: 'checkbox', defaultChecked: true});

请签出更多关于defaultChecked复选框的详细信息: https://reactjs.org/docs/uncontrolled-components.html#default-values

如果该复选框仅与React一起创建。createElement然后属性 使用defaultChecked。

React.createElement('input',{type: 'checkbox', defaultChecked: false});

归功于@nash_ag

有几种方法可以做到这一点,以下是几种:

使用State Hooks编写:

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        defaultChecked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

下面是JSBin上的一个现场演示。

使用组件编写:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          defaultChecked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

下面是JSBin上的一个现场演示。

我将状态设置为任何[]类型。并在构造函数中将状态设置为null。

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

在输入元素中

this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / >

过了一段时间我才明白。我想这可能对你们都有帮助。

取值为true或false defaultChecked={true}

<input type="checkbox"
        defaultChecked={true}
        onChange={() => setChecked(!checked)}
      />