155-react列表渲染

react列表渲染

<script type="text/babel">

var aList=[
	{name:'abc01',age:'11'},
	{name:'abc02',age:'12'},
	{name:'abc03',age:'13'},	
	{name:'abc04',age:'14'},
	{name:'abc05',age:'15'}
	]

let el=aList.map(function(item,index){
	return(
	<li key={index}>
	<span className="l"> {index+1} </span>
	<span> {item.name} </span>
	<span className="r">{item.age}</span>
	</li>
	)
});


function Top(){
	return(
	<div>
		<h2>列表</h2>
		<ul className="list">{el}</ul>
	</div>
	)
}

ReactDOM.render(<Top/>,document.getElementById('root'));

</script>






表单数据绑定
表单元件对应着数据,
而且这些数据都是变化的,
所以我们会将这些表单元件的数据
对应于组件中的state属性值
让他们之间的值实现双向数据绑定的效果

要实现这种效果
需要在表单元件上绑定onchange事件,
来将state中的值改变为表单元件中的值
同时也需要将表单的value属性值
设置为等于state中的属性值



<script type="text/babel">

class Myform extends React.Component{

	render(){
	return(
	<form>
		<p>请输入内容</p>
		<input type="text" value="请输入内容" />
	</form>
);}
}

ReactDOM.render(<Myform/>,document.getElementById('root'));

</script>




修改一下



<script type="text/babel">

class Myform extends React.Component{

	constructor(props){
	super(props);
	this.state={
	text:'请输入内容'
	}
	}

	//修改内容的函数
	//ev是系统自动生成的事件对象
	fnChange(ev){
	this.setState({text: ev.target.value});
	}

	render(){
	return(
	<form>
		<p>{this.state.text}</p>
		<input type="text" value={this.state.text} onChange={this.fnChange.bind(this)} />
	</form>
);}
}

ReactDOM.render(<Myform/>,document.getElementById('root'));

</script>