Question

我呈现了以下内容：

<form onSubmit={this.handleCompanySubmit}>
  <label>
    <input placeholder="put company name here" />
  </label>
  <input type="submit" value="Submit" />
</form>

这是事件处理程序：

handleCompanySubmit(event) {
  console.log("company submit")
  event.preventDefault(); 
  this.setState({company: event.target.value })
}

以下是构造函数中的内容：

this.handleCompanySubmit = this.handleCompanySubmit.bind(this);

我不知道为什么它不起作用。价值事件没有通过，我不确定为什么。

谢谢。

Answer 1

submit事件的value中的target将不是表单内输入的值。

您可以例如将输入value保留在company状态变量中，并在提交表单时使用它。

示例

class App extends React.Component {
  state = {
    company: ""
  };

  onChange = e => {
    this.setState({ company: e.target.value });
  };

  handleCompanySubmit = event => {
    event.preventDefault();
    console.log(this.state.company);
  };

  render() {
    return (
      <form onSubmit={this.handleCompanySubmit}>
        <label>
          <input
            placeholder="put company name here"
            value={this.state.company}
            onChange={this.onChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您需要为表单内的每个输入提供一个ID。然后，您可以使用event.target.elements.id.value在处理程序上访问它们。

class App extends React.Component {

  handleSubmit = event => {
    event.preventDefault();
    console.log(event.target.elements.company.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          <input
            placeholder="put company name here"
            id="company"
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

如何在提交中传递表格变量？ ReactJS

2 个答案: