Question

我的代码中有许多必须由用户选择的属性，他可以选择0或全部，有时，如果此用户之前已经选择了属性，则会检查一些属性，我已经尽力用reactjs做到这一点，但是checked和defaultChecked道具让我感到困惑，这里是我的代码示例。

class App extends React.Component {
  state = {
    colors: [ 'red', 'black', 'green', 'blue', 'white', 'yellow' ],
    checkedColors: [ 'blue', 'yellow' ]
  }

  handleSubmit(e) {
    e.preventDefault()
    const { target } = e
    const formData = new FormData(target)
    const checkedColors = formData.getAll('colors')
    this.setState({ checkedColors })
  }
  
  render() {
  const { colors, checkedColors } = this.state
  return (
    <form onSubmit={this.handleSubmit.bind(this)}>
      <ul>
        {colors.map((color, index) => (
          <li key={index}>
            <input
              type='checkbox'
              name='colors'
              id={color}
              value={color}
              checked={checkedColors.some(chckColor => chckColor === color)}
            />
            <label htmlFor={color}>{color}</label>
           </li>
         ))}
        </ul>
        <button>submit</button>
        <span>{checkedColors.join(', ')}</span>
       </form>
     )
   }
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

您可以通过为选中的属性分配一个布尔值来实现此目的。

下面的示例代码：

checked={ yourCondition ? true : false }

如果符合您的条件，则会选中该复选框。

Answer 2

https://stackblitz.com/edit/react-5pdd5f，这里有有效的演示程序：）

该复选框需要2个属性：选中：是对还是错（您也可以在此处设置默认值）

onChange ：当某人删除点击或添加点击时，您必须注册

对于下面的问题发表评论

如何在ReactJS中预先选中某些复选框

2 个答案: