react怎么使用props？
在开发过程中，经常会遇到父组件和子组件之间相互通信，React子组件和父组件通信包括以下几个方面：
1，子组件调用父组件的方法
（1）子组件要拿到父组件的属性，需要通过 this.props 方法。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上，
子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。
2，父组件调用子组件的方法
在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref=“xxx”）。父组件便可以通过 this.refs.xxx 来获取到子组件了。
子组件向父组件传值
- 子组件通过this.props.fun 使用父组件的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Child extends React.Component {
render() {
return (
<div>
请输入邮箱：<input onChange={this.props.handleEmail}/>
</div>
);
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
email: ' '
}
}
handleEmail = (event) => {
this.setState({
email: event.target.value
});
}
render() {
return (
<div>
<div>用户邮箱：{this.state.email}</div>
<Child name="email" handleEmail={this.handleEmail}/>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('example')
);
</script>
</body>
</html>子组件部分处理
- 有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和"@."以外的字符。
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Child extends React.Component {
handleVal = () => {
var val = this.refs.emailDom.value;
val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
this.props.handleEmail(val);
}
render() {
return (
<div>
请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/>
</div>
);
}
}
// 父类 - Parent
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
email: 'ddd'
}
}
handleEmail = (value) => {
this.setState({
email: value
});
}
render() {
return (
<div>
<div>用户邮箱：{this.state.email}</div>
<Child name="email" handleEmail={this.handleEmail}/>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('example')
);
</script>
</body>
</html>多级的传递
- 如果还存在孙子组件的情况呢？如下图，黑框为父，绿框为子，红框为孙，要求子孙的数据都传给爷爷。原理一样的，只是父要将爷爷对孙子的处理函数直接传下去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Grandson extends React.Component {
render() {
return (
<div>性别：
<select onChange={this.props.handleSelect}>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<div>
姓名：<input onChange={this.props.handleVal}/>
<Grandson handleSelect={this.props.handleSelect}/>
</div>
);
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
sex: ''
}
}
handleVal = (event) => {
this.setState({
username: event.target.value
});
}
handleSelect = (event) => {
this.setState({
sex: event.target.value
});
}
render() {
return (
<div>
<div>用户姓名：{this.state.username}</div>
<div>用户性别：{this.state.sex}</div>
<Child handleVal={this.handleVal} handleSelect={this.handleSelect}/>
</div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('example')
);
</script>
</body>
</html>父类调用子类的函数和属性
- 通过refs获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class ButtonComment extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
sendSword = () => {
var newCount = this.state.count + 1;
this.setState({
count: this.state.count + 1
});
this.props.getSwordCount();
}
render() {
return (
<button onClick={this.sendSword}>{this.props.buttonName}</button>
);
}
}
// 父类
class ImDaddyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
sendCount: 0
}
}
getSwordCount = () => {
this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
}
sendSword = () => {
console.log(this.refs);
this.refs.getSwordButton.sendSword();
}
render() {
return (
<div>
<ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
<button onClick={this.sendSword}>通过老爸送宝刀</button>
<p>
父子俩共送{this.state.sendCount}把宝刀！！！
</p>
</div>
);
}
}
ReactDOM.render(
<ImDaddyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>想要了解更多相关知识，可访问 前端学习网站！！
标签：