共计 2820 个字符，预计需要花费 8 分钟才能阅读完成。
今天来讲讲 react 的表单元素。受控元素下面来看一下如何获取输入框的值
import React, {Component} from ‘react’;
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:” 请输入 …”,
inputV:”
}
};
inp(e){
this.setState({
inputV:e.target.value {/* 通过事件细节改变 inputV 的值 */}
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (
<div>
<input type=”text” onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
<br/>
<button onClick={this.sub}>{this.props.main}</button>{/* 此处的 main 是来自父组件的传值 */}
</div>
)
}
}
export default Trem;
代码解读：this.inp = this.inp.bind(this); 绑定 inp 函数 this 指向 this.state 初始化变量 inp() 监听 input 的输入值 this.state.inputV 通过赋值获取 input 的 value
textarea 标签
import React, {Component} from ‘react’;
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:” 请输入 …”,
inputV:”
}
};
inp(e){
this.setState({
inputV:e.target.value
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (
<div>
<textarea type=”text” onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
<br/>
<button onClick={this.sub}>{this.props.main}</button>
</div>
)
}
}
export default Trem;
下拉选择框
import React, {Component} from ‘react’;
class Trem extends React.Component {
constructor(props){
super(props);
this.select = this.select.bind(this);
this.state = {
selectV:’coconut’
}
};
select(e){
this.setState({
selectV:e.target.value
});
console.log(e.target.value)
};
render(){
return (
<div>
<select value={this.state.selectV} onChange={this.select}>
<option value=”grapefruit”>Grapefruit</option>
<option value=”lime”>Lime</option>
<option value=”coconut”>Coconut</option>
<option value=”mango”>Mango</option>
</select>
<br/>
</div>
)
}
}
export default Trem;
代码解读: 请注意，Coconut 选项最初由于 selected 属性是被选中的。在 React 中，并不使用之前的 selected 属性，而在根 select 标签上用 value 属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。
总之，<input type=”text”>, <textarea>, 和 <select> 都十分类似 – 他们都通过传入一个 value 属性来实现对组件的控制。
多个输入的解决方法当你有处理多个受控的 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么。
import React,{Component} from ‘react’;
class More extends React.Component {
constructor(props){
super(props);
this.state = {
isGoing: true,
numberOfGuests: 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
});
console.log(event.target.checked,event.target.value)
};
render(){
return (
<form>
<label>
Is going:
<input name=”isGoing” type=”checkbox” checked={this.state.isGoing} onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input name=”numberOfGuests” type=”number” value={this.state.numberOfGuests} onChange={this.handleInputChange} />
</label>
</form>
)
}
}
export default More;
代码解读：this.setState({
});es6 计算属性名语法
源码地址：https://github.com/Nick091608…
