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

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 中预先选中某些复选框

How to precheck some checkbox in ReactJS

javascript

checkbox

checklistbox

reactjs