9. react - 表单

1. 受控组价： 由react的SetState() 来控制表单组件渲染，state是组件渲染的【唯一数据源】

通过一个案例来体验受控组件：

　　 1.  select 选中不能使用 selected 使用 value。 

　　 2. onChange 事件必须绑定

　　 3. 多个表单组件使用 name 属性来区分。 e.target.name

class FormControl extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      inputValue: '',
      textAreaValue: '',
      fruit: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleSubmit (event) {
    console.log(event)
    event.preventDefault();
    console.log(event.target.stuName.value)
    console.log(event.target.marker.value)
    console.log(event.target.fruit.value)

    console.log(this.state.inputValue)
    console.log(this.state.textAreaValue)
    console.log(this.state.fruit)

  }
  handleChange (e) {
    console.log(e.target, "change")
    if (e.target.name == 'stuName') {
      this.setState({
        inputValue: e.target.value
      })
    }

    if (e.target.name == 'marker') {
      this.setState({
        textAreaValue: e.target.value
      })
    }

    if (e.target.name == 'fruit') {
      this.setState({
        fruit: e.target.value
      })
    }
    
  }

  render() {
    return (
      
this.handleSubmit}>
        名称: this.state.inputValue} onChange={this.handleChange}>


        备注: this</span>.state.textAreaValue} onChange={<span style="color: rgba(0, 0, 255, 1)">this</span>.handleChange}>


        喜欢的水果:
        this.state.fruit} onChange={this.handleChange}>
          葡萄柚
          酸橙
          椰子
          芒果
        


        
      
    )
  }
}
ReactDOM.render(
  ,
  document.getElementById('root')
)

2. 非受控组件 ： 组件的值受用户决定，值存在dom对象节点中。

　　1.  this.fileInput = React.createRef()  和   绑定元素

　　2. this.fileInput.current 获取元素

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.current.files[0].name}`
    );
  }

  render() {
    return (
      
this.handleSubmit}>
        
          Upload file:
          this.fileInput} />
        
        

        Submit
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);