您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
6.事件events(及value绑定、change监听处理)
发布时间：2025-02-11 20:04:23编辑：雪饮阅读（）
-
一个最简单的click事件如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
clickHandler(e){
console.log(e);
console.log(e.target);
}
render(){
return (
<div>
<button onClick={this.clickHandler}>click to me</button>
</div>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
这里你在控制台中会发现e在控制台中展开后target里面好多属性的值都是null，其实这是react做了优化，其实是有的，在你用的时候才有，所以直接e.target就是有东西的，就是click事件源的元素，这里就是button就打印出来了。
如果你要用原始的而非react封装的target，则可以像是这样
console.log(e.nativeEvent);
接下来咱们写一个典型的react带有默认值的表单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
render(){
return (
<form>
<input type="text" defaultValue="default value"/><br/>
<select defaultValue="B">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<input type="radio" name="goodRadio" value="A" />
<input type="radio" name="goodRadio" checked value="B" />
<input type="radio" name="goodRadio" value="C" />
<br/>
<input name="goodCheckbox" type="checkbox" value="A"/>
<input name="goodCheckbox" type="checkbox" value="B"/>
<input name="goodCheckbox" type="checkbox" checked value="C"/>
<br/>
<textarea defaultValue="some text here....."/>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
实际上上面的表单虽然能用，但是表单只读，控制台有警告如：
You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked。
影响可能也是有的，这里先不纠结，要解决这个问题直接使用defaultChecked。
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
render(){
return (
<form>
<input type="text" defaultValue="default value"/><br/>
<select defaultValue="B">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<input type="radio" name="goodRadio" value="A" />
<input type="radio" name="goodRadio" defaultChecked value="B" />
<input type="radio" name="goodRadio" value="C" />
<br/>
<input name="goodCheckbox" type="checkbox" value="A"/>
<input name="goodCheckbox" type="checkbox" value="B"/>
<input name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
<br/>
<textarea defaultValue="some text here....."/>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
接下来再写一个表单提交事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
handleSubmit(e){
//阻止默认表单提交事件
e.preventDefault();
console.log('form submitting...');
console.log(e);
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" defaultValue="default value"/><br/>
<select defaultValue="B">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<input type="radio" name="goodRadio" value="A" />
<input type="radio" name="goodRadio" defaultChecked value="B" />
<input type="radio" name="goodRadio" value="C" />
<br/>
<input name="goodCheckbox" type="checkbox" value="A"/>
<input name="goodCheckbox" type="checkbox" value="B"/>
<input name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
<br/>
<textarea defaultValue="some text here....."/>
<button type="submit">提交</button>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
然后我们用state进行填充数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
constructor(props){
super(props);
this.state = {
inputValue: 'input value',
selectValue: 'A',
radioValue: 'B',
textareaValue: 'some text here.....'
};
}
handleSubmit(e){
//阻止默认表单提交事件
e.preventDefault();
console.log('form submitting...');
console.log(e);
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.inputValue}/><br/>
<select value={this.state.selectValue}>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<input type="radio" name="goodRadio" value="A" />
<input type="radio" name="goodRadio" defaultChecked value="B" />
<input type="radio" name="goodRadio" value="C" />
<br/>
<input name="goodCheckbox" type="checkbox" value="A"/>
<input name="goodCheckbox" type="checkbox" value="B"/>
<input name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
<br/>
<textarea value={this.state.textareaValue}/>
<button type="submit">提交</button>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
这里你可以发现果然这次是真的只读了，被填充数据的几个元素里面的值无法在页面中用户进行修改了。
但刚才的默认值defaultValue的时候是可以的。
这是因为我们填充值的使用用value而没有用defaultValue。
用value的时候必须监听change才能改变输入框(或下拉框或文本域)的值。
那么这里表单中任何有可能会发生元素值改变或想要元素值改变的基本都要处理change事件，这里暂时先以input和select为例写两个如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class MessageBoxComponent extends React.Component{
constructor(props){
super(props);
this.state = {
inputValue: 'input value',
selectValue: 'A',
radioValue: 'B',
textareaValue: 'some text here.....'
};
this.handleInput = this.handleInput.bind(this);
this.handleSelect = this.handleSelect.bind(this);
}
handleSubmit(e){
e.preventDefault();
console.log('form submitting...');
console.log(e);
}
//处理input的change事件
handleInput(e){
this.setState(
{
inputValue: e.target.value
}
)
}
//处理select的change事件
handleSelect(e){
this.setState(
{
selectValue: e.target.value
}
)
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.inputValue} onChange={this.handleInput}/><br/>
<select value={this.state.selectValue} onChange={this.handleSelect}>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br/>
<p>radio button!</p>
<input type="radio" name="goodRadio" value="A" />
<input type="radio" name="goodRadio" defaultChecked value="B" />
<input type="radio" name="goodRadio" value="C" />
<br/>
<input name="goodCheckbox" type="checkbox" value="A"/>
<input name="goodCheckbox" type="checkbox" value="B"/>
<input name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
<br/>
<textarea value={this.state.textareaValue}/>
<button type="submit">提交</button>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
关键字词：事件,events,value,绑定,赋值,change,监听,处理
上一篇：5.组件的参数props
下一篇：返回列表