阅读表单输入？答案

【问题标题】：Reading form inputs?阅读表单输入？
【发布时间】：2018-11-12 03:27:44
【问题描述】：

你会如何读取输入值？

在reacjs 网站上我看到了非常复杂的方法！

https://reactjs.org/docs/forms.html

我只想读取值并通过 ajax fetch() 请求提交。 IE。我不需要管理绑定、事件等......

【问题讨论】：

事件处理程序检测用户何时通过单击或拖动或其他方式与我们的应用程序交互。这是 React 库的绝对目标，响应用户交互。

标签： ajax reactjs forms fetch

【解决方案1】：

到目前为止，从 html 控件读取值的最简单方法是使用事件处理程序。

export default class myComponent extends Component {
    person = {};

    onChange = field => e => {
      this.person[field] = e.target.value;
    };

    render() {
      return (
        <Input
          id="firstName"
          name="firstName"
          autoComplete="firstName"
          autoFocus
          onChange={this.onChange('FirstName')}
        />
      );
    }
  }

在上面的代码 sn-p 中，我们基本上告诉 react 在更新 firstName 控件更新时触发 onChange 成员。我们的方法将接收到一个事件 e，它有一个控件句柄，我们基本上可以探测它的 value 成员以获取输入的内容（很像 jquery's $('#element').value()）。

为什么它是最简单的方法？因为它足够通用，可以让您在一个反应组件中处理多个输入。请注意，除了事件之外，我还指示 React 将控件名称传递给我，并且使用这种方法我基本上可以准确地知道我的哪些输入（如果是多个输入）导致事件触发。

【讨论】：

为什么不只是类似于 getElementbyID() 的东西
我想你仍然可以使用经典的 document.getElementById 但是你会比使用已经提供的 reactjs 机制失去很多。我认为反应方式更好。 [快速说明] 因为 react 使用 VDOM，我只希望在运行 document.getElementById（通常在 componentDidMount() 中）时，元素在虚拟中。我觉得工作量太大了

【解决方案2】：

读取用户输入值是可行的，建议通过事件处理程序。

以下示例将解释如何在提交表单时读取输入值并通过 fetch 将其发送到后端

  class Test extends Component{
       constructor(props){
           super(props);
           this.state = {
               name: “”
           }
       }

      handleChange = event => {
           this.setState({name: event.target.value});
      }

      handleSubmit = () => {
          //send the value via fetch backend I.e., this.state.name
      }
      render(){
          const { name } = this.state;
          render(
              <form onSubmit={this.handleSubmit}
                  <label>
                     Name:
                    <input type="text" value={name} onChange={this.handleChange} name="name" />
                 </label>
                 <input type="submit" value="Submit" />
              </form>
          )
      }
  }

【讨论】：