React Webpack - 提交按钮未在表单提交时检索输入值答案

【问题标题】：React Webpack - Submit Button not retrieving input value on form submitReact Webpack - 提交按钮未在表单提交时检索输入值
【发布时间】：2016-07-16 22:15:44
【问题描述】：

我正在将 webpack 与 React 一起使用，但我一生都无法理解这个构建中发生了什么。这是应该发生的事情。

var headerInput 更改为输入 onChange 的任何值。
提交表单时 (onSubmit)，console.log 会记录 headerInput 值。

问题：控制台记录的值是数字，通常类似于：.0.0.1。我认为这是 console.log'ing 点击事件。为什么不像 handlerInput 函数中那样赋值？

非常感谢任何帮助。谢谢大家。

var headerInput = null;

import React from "react";

export default class Navigation extends React.Component{
  handlerInput(e,headerInput){
    headerInput = e.target.value;
    console.log(headerInput);
  };
  clickSubmit(e,headerInput){
    e.preventDefault();
    console.log(headerInput);
  };
  render(){
    return(
    <form onSubmit={this.clickSubmit.bind(this)}>
      <input type="text" placeholder="change header" onChange={this.handlerInput.bind(this)} />
      <button>Change Header</button>
    </form>
    );
  }
};

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

这不是使用 React 的推荐方式。您应该使用组件附带的状态 API，而不是依赖“全局”来存储您的状态。

像这样：

import React from "react";

export default class Navigation extends React.Component{
  constructor(props) {
    super(props);

    // Set up your default state here.
    this.state = { }; 

    // Do early binding.
    this.handlerInput = this.handlerInput.bind(this);
    this.clickSubmit = this.clickSubmit.bind(this);
  }

  handlerInput(e){
    // Use setState to update the state.
    this.setState({ 
      headerInput: e.target.value
    }
  };
  clickSubmit(e){
    e.preventDefault();

    // You read state via this.state
    console.log(this.state.headerInput);
  };
  render(){
    return(
    <form onSubmit={this.clickSubmit}>
      /* Make sure you pass the current state to the input */
      <input 
        type="text" 
        placeholder="change header" 
        onChange={this.handlerInput} 
        value={this.state.headerInput}
      />
      <button>Change Header</button>
    </form>
    );
  }
};

我绝对建议您重新访问官方的 react 文档，例如 thinking in react 和 react forms 教程。

【讨论】：

我在这个实例中使用了一个全局变量来进行测试。我希望整体状态更少，并且只获取输入值而不分配变量。我了解了 refs。我最终使用 refs 来解决问题是这种方法的好习惯。 jsfiddle.net/u46Lj95r

【解决方案2】：

如果输入是严格单向的（你只能从中读取），那么只需使用 ref

import React from "react";

class Navigation extends React.Component{
  clickSubmit(e,headerInput){
    e.preventDefault();
    console.log(this.inputEl.value);
  };
  render(){
    return(
      <form onSubmit={this.clickSubmit.bind(this)}>
        <input placeholder="change header" ref={el => this.inputEl = el} />
        <button>Change Header</button>
      </form>
    );
  }
};

请注意...

虽然字符串引用没有被弃用，但它们被认为是遗留的，并且可能会在将来的某个时候被弃用。打回来参考是首选。

https://facebook.github.io/react/docs/more-about-refs.html

【讨论】：