9. react - 表单

Posted monkey-k

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 (
      <form onSubmit={this.handleSubmit}>
        名称: <input type="text" name="stuName" value={this.state.inputValue} onChange={this.handleChange}></input><br /><br />
        备注: <textarea name="marker" value={this.state.textAreaValue} onChange={this.handleChange}></textarea><br /><br />
        喜欢的水果:
        <select name="fruit" value={this.state.fruit} onChange={this.handleChange}>
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
          <option value="coconut">椰子</option>
          <option value="mango">芒果</option>
        </select><br /><br />
        <input type="submit" value="提交" />
      </form>
    )
  }
}
ReactDOM.render(
  <FormControl />,
  document.getElementById(‘root‘)
)

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

  1.  this.fileInput = React.createRef()  和  <input type="file" ref={this.fileInput} /> 绑定元素

  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 (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById(‘root‘)
);

 

以上是关于9. react - 表单的主要内容,如果未能解决你的问题,请参考以下文章

[译] 如何在React中写出更优秀的代码

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

超级有用的9个PHP代码片段

VSCode自定义代码片段9——JS中的面向对象编程

在 Safari 中状态更改后,React 组件不会重新呈现

my React demo 9