列表
【keys】
keys可以在DOM中的某些元素被增加或刪除的時候幫助React識別哪些元素發(fā)生了變化鲫懒。因此應(yīng)當(dāng)給數(shù)組中的每一個元素賦予一個確定的標(biāo)識。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
??一個元素的key最好是這個元素在列表中擁有的一個獨一無二的字符串刽辙。通常窥岩，使用來自數(shù)據(jù)的id作為元素的key。當(dāng)元素沒有確定的id時宰缤，可以使用序列號索引index作為key颂翼。
const todoItems = todos.map((todo, index) =>
<li key={index}>
{todo.text}
</li>
);
[注意]如果列表可以重新排序，不建議使用索引來進行排序慨灭，因為這會導(dǎo)致渲染變得很慢朦乏。
JSX允許在大括號中嵌入任何表達式。
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
表單
【可控組件和不可控組件】
在React中的input標(biāo)簽是有些小坑的氧骤，input本身就有自己的緩存機制呻疹，然后React的state也有緩存機制，像<input>,<textarea>, 和 <select>這類表單元素會維持自身狀態(tài)筹陵，并根據(jù)用戶輸入進行更新刽锤。但在React中镊尺，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 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 屬性是在表單元素上設(shè)置的弄砍，因此顯示的值將始終為 React數(shù)據(jù)源上this.state.value的值。由于每次按鍵都會觸發(fā) handleChange來更新當(dāng)前React的state输涕，所展示的值也會隨著不同用戶的輸入而更新音婶。
可控組件的優(yōu)點：
符合React單向數(shù)據(jù)流特性，即從state流向render輸出的結(jié)果莱坎，數(shù)據(jù)存儲在state中桃熄，便于訪問和處理。
【textarea】
在HTML當(dāng)中型奥，<textarea> 元素通過子節(jié)點來定義它的文本內(nèi)容瞳收。在React中，<textarea>會用value屬性來代替厢汹，這樣的話螟深，表單中的<textarea>非常類似于使用單行輸入的表單：
<textarea value={this.state.value} onChange={this.handleChange} />
【select】
在React中，并不使用之前的selected屬性烫葬，而在根select標(biāo)簽上用value屬性來表示選中項界弧。這在受控組件中更為方便，因為只需要在一個地方來更新組件搭综。
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
</select>
【多個input】
有處理多個受控的input元素時垢箕，可以通過給每個元素添加一個name屬性，來讓處理函數(shù)根據(jù) 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>
);
}
}
