React 表单与事件
一个简单的实例
在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react表单与事件</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 创建 HelloMessage 组件
var HelloMessage = React.createClass({
// 定义初始状态
getInitialState: function() {
return {
value: 'Hello World'
}; // 这个对象可以通过this.state属性读取
},
// 输入框改变事件
handleChange: function(event) {
/**
* 设置状态
* 每次触发DOM事件时会产生一个事件对象（也称event对象）
* event.target代表当前触发事件的元素
*/
this.setState({ value: event.target.value });
},
// 渲染
render: function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>
);
}
});
// 创建虚拟DOM
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
上面的代码将渲染出一个值为 Hello World 的 input 元素，并通过 onChange 事件响应更新用户输入的值。
实例 2
在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。
你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react表单与事件</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/**
* 创建 Content 组件
* this.props 接收子元素暴露出去的属性的属性值
*/
var Content = React.createClass({
render: function() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
});
// 创建 HelloMessage 组件
var HelloMessage = React.createClass({
// 定义初始状态
getInitialState: function() {
return {
value: 'Hello World'
}; // 这个对象可以通过this.state读取
},
// 子组件状态更新事件
handleChange: function(event) {
// 设置状态
this.setState({ value: event.target.value });
},
/**
* 渲染
* return 的 () 可以省略,但是省略后不能换行
*/
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp={value} updateStateProp={this.handleChange}></Content>
</div>
}
});
// 创建虚拟DOM
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
React 事件
以下实例演示通过 onClick 事件来修改数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>onClick事件</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 创建 HelloMessage 组件
var HelloMessage = React.createClass({
// 定义初始状态
getInitialState: function() {
return {
value: 'Hello World'
}; // 这个对象可以通过this.state读取
},
// 子组件状态更新事件
handleChange: function(event) {
// 设置状态
this.setState({ value: '百度' });
},
/**
* 渲染
* return 的 () 可以省略,但是省略后不能换行
*/
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>点我</button>
<h4>{value}</h4>
</div>
}
});
// 创建虚拟DOM
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react表单与事件</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 创建 Content 组件
var Content = React.createClass({
render: function() {
return <div>
<button onClick={this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
// 创建 HelloMessage 组件
var HelloMessage = React.createClass({
// 定义初始状态
getInitialState: function() {
return {
value: 'Hello World'
}; // 这个对象可以通过this.state读取
},
handleChange: function(event) {
// 设置状态
this.setState({ value: '百度' });
},
// 渲染
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp={value} updateStateProp={this.handleChange}></Content>
</div>
}
});
// 创建虚拟DOM
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
.
