react处理表单的正确方法是利用控制组件
在html中表单元素通常保持自己的状态并根据用户输入进行更新,而在react中,可变状态一般保存在组件的state属性中,并且只能通过setState()更新
使react的state成为单一数据源原则,渲染表单的react组件,可以控制用户输入之后的行为
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value:''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value:event.target.value});
}
handleSubmit(event) {
alert('a name was submitted:' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {value:'pls. write an essay'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value:event.target.value});
}
handleSubmit(event) {
alert('a name was submitted:' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>
Essay:
<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value:'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value:event.target.value});
}
handleSubmit(event) {
alert('a name was submitted:' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>
pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">grapefruit</option>
<option value="lime">lime</option>
<option value="coconut">coconut</option>
<option value="mango">mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
该标签允许用户输入文件,由于是只读,所以是不可控组件
处理复杂的输入
用event.target.name
标识需要处理的input
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing:true,
numberOfGuest:2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked :target.value;
const name = target.name;
this.setState({
[name]:value
});
}
render() {
return(
<form>
<label>
is going:
<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
</label>
<br />
<label>
number of guest:
<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/>
</label>
</form>
);
}
}