列表
在React中，拿到一组数据后，一般会用map方法来遍历渲染。
const dataList = [{claimNum: 1}, {claimNum: 2}];
ReactDOM.render(
<main>
dataList.length ? (
dataList.map((item) => {
return (
<div className={style['list-content']}>
<div
className={style['claim-number']}
onClick={()=>
toDetail({
typeCode: item.claimTypeCode,
claimHeaderId: item.claimHeaderId,
entrance: 'WDDJ',
})
}
>{item.claimNum}
</div>
</div>
);
})
) : (
<div className={style.noData}>{loading ? null : '未查询到有效数据'}</div>
)}
</main>,
document.getElementById('root')
);
表单
HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中，像 <input>, <textarea><select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。
实例
在输入框值发生变化时可以更新 state。可以使用 onChange 事件来监听 input 的变化，并修改 state。
export default class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello!'};
}
handleChange = (e) => {
this.setState({value: e.target.value});
}
render() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={(e)=>this.handleChange} />
<h4>{value}</h4>
</div>;
)
}
}
select
在 React 中，不使用 selected 属性，而在根select 标签上用value属性来表示选中项。
<select value={this.state.value} onChange={(e)=>this.handleChange}>
<option value="y">1</option>
<option value="n">2</option>
</select>
多个表单
处理多个 input 元素时，可以通过给每个元素添加一个 name属性，来让处理函数根据 event.target.name 的值来选择做什么。
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
}
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>
是否离开:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={(e)=>this.handleInputChange} />
</label>
<br />
<label>
访客数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
父子组件都使用表单
当你需要从子组件中更新父组件的state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上
// 子组件
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
// 父组件
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello world!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'hello'})
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp = {value} updateStateProp = {this.handleChange}></Content>
</div>;
)
}
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
)
