您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
7.指向ref(通过ref获取元素值，通过ref让父组件调用子组件方法，通过ref让子组件的事件触发（通过props）到父组件的方法)
发布时间：2025-02-11 23:11:45编辑：雪饮阅读（）
-
用ref来获取元素的value值，看我这样做：
<!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);
//用ref获取元素的value值，需要被调用方法的this指向当前所在组件
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e){
e.preventDefault();
//用ref获取元素的value值
console.log(this.refs['goodInput'].value);
}
handleInput(e){
this.setState(
{
inputValue: e.target.value
}
)
}
handleSelect(e){
this.setState(
{
selectValue: e.target.value
}
)
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><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>
所以，我们进一步可以用ref获取select，textarea的value值：
<!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.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e){
e.preventDefault();
var formData={
input: this.refs['goodInput'].value,
select: this.refs['goodSelect'].value,
textarea: this.refs['goodTextarea'].value
}
console.log("the form result is:");
console.log(formData);
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><br/>
选项：
<select defaultValue={this.state.selectValue} ref="goodSelect">
<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={this.state.textareaValue} ref="goodTextarea"/>
<button type="submit">提交</button>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
接下来再结合onChange将radio和checkbox将单选框和复选框的改变值也能同步到提交时获取到：
<!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="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',
checkValues:[],
textareaValue: 'some text here.....'
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRadio = this.handleRadio.bind(this);
this.handleCheck = this.handleCheck.bind(this);
}
handleSubmit(e){
e.preventDefault();
var formData={
input: this.refs['goodInput'].value,
select: this.refs['goodSelect'].value,
textarea: this.refs['goodTextarea'].value,
radio: this.state.radioValue,
check: this.state.checkValues
}
console.log("the form result is:");
console.log(formData);
}
handleRadio(e){
this.setState({
radioValue: e.target.value
})
}
handleCheck(e){
//slice()方法不会修改原始数组,而是创建并返回一个新的数组。 如果不提供参数,slice()会复制整个数组
var checkValues = this.state.checkValues.slice();
var newValue = e.target.value;
if(checkValues.indexOf(newValue)===-1){
checkValues.push(newValue);
}else{
//splice从指定索引开始删除指定个数的数组元素。
checkValues.splice(checkValues.indexOf(newValue),1);
}
this.setState({
checkValues: checkValues
})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><br/>
选项：
<select defaultValue={this.state.selectValue} ref="goodSelect">
<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 onChange={this.handleRadio} type="radio" name="goodRadio" value="A" />
<input onChange={this.handleRadio} type="radio" name="goodRadio" defaultChecked value="B" />
<input onChange={this.handleRadio} type="radio" name="goodRadio" value="C" />
<br/>
<input onChange={this.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
<input onChange={this.handleCheck} name="goodCheckbox" type="checkbox" value="B"/>
<input onChange={this.handleCheck} name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
<br/>
<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"/>
<button type="submit">提交</button>
</form>
);
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
但这里的radio与checkbox在组件模板中冗余代码太多了，可以分别各自拆分为组件如：
<!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="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',
checkValues:[],
textareaValue: 'some text here.....'
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRadio = this.handleRadio.bind(this);
this.handleCheck = this.handleCheck.bind(this);
}
handleSubmit(e){
e.preventDefault();
var formData={
input: this.refs['goodInput'].value,
select: this.refs['goodSelect'].value,
textarea: this.refs['goodTextarea'].value,
radio: this.state.radioValue,
check: this.state.checkValues
}
console.log("the form result is:");
console.log(formData);
}
handleRadio(e){
this.setState({
radioValue: e.target.value
})
}
handleCheck(e){
var checkValues = this.state.checkValues.slice();
var newValue = e.target.value;
var index=checkValues.indexOf(newValue);
if(index===-1){
checkValues.push(newValue);
}else{
checkValues.splice(index,1);
}
this.setState({
checkValues: checkValues
})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><br/>
选项：
<select defaultValue={this.state.selectValue} ref="goodSelect">
<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>
<RadioButtons handleRadio={this.handleRadio}/>
<br/>
<CheckboxButtons handleCheck={this.handleCheck}/>
<br/>
<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"/>
<button type="submit">提交</button>
</form>
);
}
}
//radio组件
class RadioButtons extends React.Component{
render(){
return (
<div>
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="A" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" defaultChecked value="B" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="C" />
</div>
)
}
}
//checkbox组件
class CheckboxButtons extends React.Component{
render(){
return (
<div>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
</div>
)
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
我们进一步可以在子组件上面写一个方法，然后父组件可以通过ref来调用子组件的方法：
<!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="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',
checkValues:[],
textareaValue: 'some text here.....'
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRadio = this.handleRadio.bind(this);
this.handleCheck = this.handleCheck.bind(this);
}
handleSubmit(e){
e.preventDefault();
var formData={
input: this.refs['goodInput'].value,
select: this.refs['goodSelect'].value,
textarea: this.refs['goodTextarea'].value,
radio: this.state.radioValue,
check: this.state.checkValues
}
console.log("the form result is:");
console.log(formData);
//调用子组件的方法
this.refs.goodRadio.saySomething()
}
handleRadio(e){
this.setState({
radioValue: e.target.value
})
}
handleCheck(e){
var checkValues = this.state.checkValues.slice();
var newValue = e.target.value;
var index=checkValues.indexOf(newValue);
if(index===-1){
checkValues.push(newValue);
}else{
checkValues.splice(index,1);
}
this.setState({
checkValues: checkValues
})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><br/>
选项：
<select defaultValue={this.state.selectValue} ref="goodSelect">
<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>
<RadioButtons handleRadio={this.handleRadio} ref="goodRadio"/>
<br/>
<CheckboxButtons handleCheck={this.handleCheck}/>
<br/>
<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"/>
<button type="submit">提交</button>
</form>
);
}
}
//radio组件
class RadioButtons extends React.Component{
saySomething(){
//yo what's up man! 怎么了伙计
//yo （用于招呼、引起注意）唷，喂
alert("yo what's up man!");
}
render(){
return (
<div>
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="A" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" defaultChecked value="B" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="C" />
</div>
)
}
}
//checkbox组件
class CheckboxButtons extends React.Component{
render(){
return (
<div>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
</div>
)
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
元素的ref还可以使用函数，例如这里让input元素刚载入就聚焦focus：
<!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="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',
checkValues:[],
textareaValue: 'some text here.....'
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRadio = this.handleRadio.bind(this);
this.handleCheck = this.handleCheck.bind(this);
}
handleSubmit(e){
e.preventDefault();
var formData={
input: this.refs['goodInput'].value,
select: this.refs['goodSelect'].value,
textarea: this.refs['goodTextarea'].value,
radio: this.state.radioValue,
check: this.state.checkValues
}
console.log("the form result is:");
console.log(formData);
//调用子组件的方法
this.refs.goodRadio.saySomething()
}
handleRadio(e){
this.setState({
radioValue: e.target.value
})
}
handleCheck(e){
var checkValues = this.state.checkValues.slice();
var newValue = e.target.value;
var index=checkValues.indexOf(newValue);
if(index===-1){
checkValues.push(newValue);
}else{
checkValues.splice(index,1);
}
this.setState({
checkValues: checkValues
})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input ref={function(comp){comp.focus()}} type="text" defaultValue={this.state.inputValue}/><br/>
选项：
<select defaultValue={this.state.selectValue} ref="goodSelect">
<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>
<RadioButtons handleRadio={this.handleRadio} ref="goodRadio"/>
<br/>
<CheckboxButtons handleCheck={this.handleCheck}/>
<br/>
<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"/>
<button type="submit">提交</button>
</form>
);
}
}
//radio组件
class RadioButtons extends React.Component{
saySomething(){
//yo what's up man! 怎么了伙计
//yo （用于招呼、引起注意）唷，喂
alert("yo what's up man!");
}
render(){
return (
<div>
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="A" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" defaultChecked value="B" />
<input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="C" />
</div>
)
}
}
//checkbox组件
class CheckboxButtons extends React.Component{
render(){
return (
<div>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B"/>
<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" defaultChecked value="C"/>
</div>
)
}
}
ReactDOM.render(<MessageBoxComponent />, document.getElementById('app'));
</script>
</body>
</html>
关键字词：ref,父组件调用子组件方法,子组件调用父组件方法
上一篇：6.事件events(及value绑定、change监听处理)
下一篇：返回列表