如何在 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 ：当有人删除点击或添加点击时，您必须注册它

对于问题在下面评论