列表
【keys】
keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此应当给数组中的每一个元素赋予一个确定的标识。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，使用来自数据的id作为元素的key。当元素没有确定的id时，可以使用序列号索引index作为key。
const todoItems = todos.map((todo, index) =>
<li key={index}>
{todo.text}
</li>
);
[注意]如果列表可以重新排序，不建议使用索引来进行排序，因为这会导致渲染变得很慢。
JSX允许在大括号中嵌入任何表达式。
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
表单
【可控组件和不可控组件】
在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的state也有缓存机制，像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到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>
);
}
}
由于 value 属性是在表单元素上设置的，因此显示的值将始终为 React数据源上this.state.value的值。由于每次按键都会触发 handleChange来更新当前React的state，所展示的值也会随着不同用户的输入而更新。
可控组件的优点：
符合React单向数据流特性，即从state流向render输出的结果，数据存储在state中，便于访问和处理。
【textarea】
在HTML当中，<textarea> 元素通过子节点来定义它的文本内容。在React中，<textarea>会用value属性来代替，这样的话，表单中的<textarea>非常类似于使用单行输入的表单：
<textarea value={this.state.value} onChange={this.handleChange} />
【select】
在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为只需要在一个地方来更新组件。
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
</select>
【多个input】
有处理多个受控的input元素时，可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。
class Reservation 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
});
}
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>
);
}
}
网友评论