表单元素在react中的正确使用方式

[Jenna-u]

在react中使用表单元素要注意以下几种情况：

1.input 相同的name会作为一组操作，例如checkbox; 在react中多次调用, 如果不区分name 和 id 默认只会生效第一个checkbox； name在input中一般是form提交时才使用

<div>
  <label htmlFor="apple">
     <input  id="apple" type="checkbox" name="demo"  /> apple
  </label>
  <label htmlFor="orange">
     <input  id="orange" type="checkbox" name="demo"  /> orange
  </label>
</div>

2.defaultChecked, defaultValue 是react的属性，在HTML中input只对 checked 和 value 生效。defaultChecked不能渲染后端传入的数据，且后端数据可能会变。两种方式可以解决：

// 第一种方式，用checked去渲染后端传入数据
<input 
  type="checkbox"
  checked={this.props.checked}
  defaultChecked=false
/>

// 第二种方式，把后端数据转嫁到span元素上,通过onChange去改变span的className来渲染选中样式，并且把checkbox置为visibility:hidden;
class CheckList extends Component {

  state = {
    isCheck: false
  }
 
  onCheck = e => {
     this.setState({
       isCheck: e.target.checked
     })
  }

  render() {
    return (
     <label>
       <input 
          type="checkbox"
          onChange={e => this.onCheck(e)}
       />
     <span className={this.state.isCheck ? 'checkedCls' :'checkCls'} />
    </label>
   )
 }
}

总结：

react推荐使用你的表单元素是controlled，所以尽量保持它是可控，推荐使用第一种，且改变表单元素的值状态用setState去操作。

参考：
react可控组件：https://reactjs.org/docs/forms.html#controlled-components