我在渲染函数中有一个简单的表单,如下所示:
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
//How to access email and password here ?
}
我应该在我的handleLogin: function(){…}访问电子邮件和密码字段?
下面是我使用单个inputChangeHandler收集多个表单输入的方法
import React from "react";
const COLORS = ["red", "orange", "yellow", "purple", "green", "white", "black"];
export default function App() {
const initialFormFields = {
name: undefined,
email: undefined,
favourite_color: undefined
};
const [formInput, setFormInput] = React.useState(initialFormFields);
function inputChangeHandler(event) {
setFormInput(prevFormState => ({
...prevFormState,
[event.target.name]: event.target.value
}))
};
return (
<div className="App">
<form>
<label>Name: <input name="name" type="text" value={formInput.name} onChange={inputChangeHandler}/></label>
<label>Email: <input name="email" type="email" value={formInput.email} onChange={inputChangeHandler}/></label>
<div>
{COLORS.map(color => <label><input type="radio" name="favourite_color" value={color} key={color} onChange={inputChangeHandler}/> {color} </label>)}
</div>
</form>
<div>
Entered Name: {formInput.name}
Entered Email: {formInput.email}
Favourite Color: {formInput.favourite_color}
</div>
</div>
);
}
另一种方法是使用ref属性并使用this.refs引用值。这里有一个简单的例子:
render: function() {
return (<form onSubmit={this.submitForm}>
<input ref="theInput" />
</form>);
},
submitForm: function(e) {
e.preventDefault();
alert(React.findDOMNode(this.refs.theInput).value);
}
更多信息可以在React文档中找到:
https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
关于如何在React中使用单选按钮中描述的很多原因?这种方法并不总是最好的,但在一些简单的情况下确实是一种有用的替代方法。