表单 – 如何在React中的onSubmit期间传递输入值？

概述我在React中有一个基本表单,要求输入用户名.输入所需的用户名(比如iggy)之后,我想把它变成console.log那个用户名,iggy. 事情就是这样：传统上,我会做类似的事情 constructor(){ super(); this.state={username: ''} ... handleUsernameEnter: function(e){ this.se 我在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>  ...

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

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

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

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

我的直觉是说我需要在输入中使用ref,但我不确定如何引用onsubmit来从特定输入中获取值.类似于< form onsubmit = {this.handleUsernameSubmission(input.'usernameItem')}>

解决方法 是的,你当然可以在这里使用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 supports a special attribute that you can attach to any
component. The ref attribute takes a callback function,and the
callback will be executed immediately after the component is mounted
or unmounted.

When the ref attribute is used on an HTML element,the ref callback
receives the underlying DOM element as its argument.
React will call the ref callback with the DOM element when the
component mounts,and call it with null when it unmounts.

Using the ref callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the ref callback like in the above example.

总结

以上是内存溢出为你收集整理的表单 – 如何在React中的onSubmit期间传递输入值？全部内容，希望文章能够帮你解决表单 – 如何在React中的onSubmit期间传递输入值？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。