Question

我在React中有一个基本表单，要求输入用户名。输入所需的用户名（比如说iggy）后，我希望它为console.log，即用户名iggy。

事情就是这样：传统上，我会做类似

的事情

constructor(){
  super();
  this.state={username: ''}
  ...

  handleUsernameEnter: function(e){
    this.setState({
      username: e.target.value
    })
  },
  ...
  <form onSubmit={this.handleUsernameSubmission}>
    <input placeholder="enter username" ref="usernameItem" onChange={this.handleUsernameEnter} />
    <input type="submit" value="Submit username" />
  </form>
  ...

我会在用户输入时将用户名存储在state中。没问题。这次，我还不想在状态中保存用户名。我希望用户在输入文本上输入用户名，当用户单击提交按钮时，handleUsernameSubmission将以某种方式获取用户输入的用户名的value，以及console.log该值。我无法弄清楚如何将input中的值从username传递给handleUsernameSubmission。

handleUsernameSubmission: function(username){
    console.log('username entered: ', username)
  },

JSFiddle：https://jsfiddle.net/iggyfiddle/adj4Ln1p/3/

如何将用户名从表单的输入值传递到username中的handleUserSubmission变量，而不将其保存为状态？

我的直觉是说我需要在输入中使用ref，但我不确定如何引用onsubmit从该特定输入中获取value。像<form onSubmit={this.handleUsernameSubmission(input.'usernameItem')}>

这样的东西

Answer 1

是的，当然可以在这里使用this.refs。

请查看documentation。

以下是代码：

var Hello = React.createClass({

  handleUsernameSubmission: function(e){
    if(e) e.preventDefault();
    const name = this.refs.usernameItem.value;
    console.log('Your name is', name);
  },

  render: function() {
    return (
      <div>
        <form onSubmit={this.handleUsernameSubmission}>
          <input placeholder="enter username" ref="usernameItem" />
          <input type="submit" value="Submit username" />
        </form>
      </div>
    )
  }
});


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

另外，我已经实现了它的ES6版本，它看起来更好：

class Form extends React.Component {

  handleSubmit = (e) => {
    if(e) e.preventDefault();
    const name = this.input.value;
    console.log('Your name is', name);
  }

  render(){
     return (
      <form onSubmit={this.handleSubmit}>
        <input placeholder="Your name" type="text" ref={(element) => { this.input = element }} />
        <button>Submit!</button>
      </form>
    )
  }
}

ReactDOM.render(<Form />, document.getElementById('root'));

React支持可以附加到任何属性的特殊属性   零件。 ref属性采用回调函数，而   安装组件后将立即执行回调   或未安装。

当ref元素用于HTML元素时，ref回调   接收底层DOM元素作为其参数。   当时，React将使用DOM元素调用ref回调   组件安装，并在卸载时调用它。

使用ref回调只是为了在类上设置属性是很常见的   用于访问DOM元素的模式。首选方法是设置   ref回调中的属性，如上例所示。

Answer 2

您也可以使用<dependency> <groupId>com.sun.jersey</groupId> <artifactId>jersey-json</artifactId> <version>${jersey-version}</version> </dependency>对象。

所以在这种情况下你的提交看起来就像那样。

event

所以你基本上使用class Form extends React.Component { handleSubmit = (e) => { if(e) e.preventDefault(); const [input] = e.target.children console.log('Your name is', input.value); } render(){ return ( <form onSubmit={this.handleSubmit}> <input placeholder="Your name" type="text"/> <button>Submit!</button> </form> ) } } ReactDOM.render(<Form />, document.getElementById('root'));获得form的DOMElement，然后你也可以访问它的e.target DOME元素并使用数组传播ES6功能，你拿第一个，即{{1}然后在children来电中使用input。

如果没有ES6传播，它将会像。

value

当然，使用console.log通常会更好，但是当你真的有这个简单的例子时，你可以这样做。但在一个真实的应用程序中，我不会依赖元素顺序等。

Answer 3

你可以使用ref，是的。我假设你正在使用JQuery，因为它简化了我的答案，但你没有需要 JQuery（请参阅非JQuery解决方案的其他答案）。有两种使用refs的方法。

<form onSubmit={ this.onSubmit }>
    <input ref="username" /> <-- #1

    <input ref={ (input) => { this.input = $(input); } } <-- #2
</form>

onSubmit = (event) => {
    // using method #1
    let username = $(this.refs.username).val();

    // using method #2
    let username = this.input.val();
};

如果您希望handleUsernameSubmit的签名接受用户名作为参数，我会将其与上述内容结合起来并执行类似

的操作

<form onSubmit={ () => { this.handleUsernameSubmit(this.input.val()) }) }>

代表form#onSubmit。

Answer 4

您还可以使用传统方式：document.getElementById

<form method="post" path="/home" onSubmit={this.handleFormSubmit}>
<TextField id="username" label="Username" variant="outlined"/>

handleFormSubmit = (event) => {
    event.preventDefault();
    alert(document.getElementById('username').value);
}

如何在React中onSubmit期间传递输入值？

4 个答案: