我在渲染函数中有一个简单的表单，如下所示:
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(){…}访问电子邮件和密码字段?
当前回答
如果你尝试Aliaksandr Sushkevich解决方案，Typescript会抱怨，一个解决方法可以使用类型断言
<form
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
const target = e.target as typeof e.target & {
username: { value: string };
password: { value: string };
};
const username = target.username.value; // typechecks
const password = target.password.value; // typechecks
// etc...
}}
>
<input type="text" name="username"/>
...
不过，这仍然只是一种变通方法，因为在这里您要告诉typescript期望什么。如果您添加的值没有相应的输入元素，这将在运行时中断。
其他回答
如果元素名多次出现，则必须使用forEach()。
html
<input type="checkbox" name="delete" id="flizzit" />
<input type="checkbox" name="delete" id="floo" />
<input type="checkbox" name="delete" id="flum" />
<input type="submit" value="Save" onClick={evt => saveAction(evt)}></input>
js
const submitAction = (evt) => {
evt.preventDefault();
const dels = evt.target.parentElement.delete;
const deleted = [];
dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
window.alert(deleted.length);
};
注意，本例中的dels是RadioNodeList，而不是数组，也不是Iterable。forEach()是列表类的内置方法。这里不能使用map()或reduce()。
下面是我使用单个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>
);
}
如果你在项目中使用Redux，你可以考虑使用这个更高阶的组件https://github.com/erikras/redux-form。
这可能会帮助Meteor (v1.3)的用户:
render: function() {
return (
<form onSubmit={this.submitForm.bind(this)}>
<input type="text" ref="email" placeholder="Email" />
<input type="password" ref="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
},
submitForm: function(e) {
e.preventDefault();
console.log( this.refs.email.value );
console.log( this.refs.password.value );
}
onChange(event){
console.log(event.target.value);
}
handleSubmit(event){
event.preventDefault();
const formData = {};
for (const data in this.refs) {
formData[data] = this.refs[data].value;
}
console.log(formData);
}
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" ref="username" onChange={this.onChange} className="form-control"/>
<input type="text" ref="password" onChange={this.onChange} className="form-control"/>
<button type="submit" className="btn-danger btn-sm">Search</button>
</form>
输出图像附在这里
