React组件通讯

• Z时代
• 2024-01-10
• 分类：综合

1.子组件操作父组件值

父组件代码:

import React, { Component } from 'react'
import Demo from './Demo'
class Todo extends Component {
    constructor(){
        super();
        this.state = {
            title:'张三丰'
        }
    }
    addTodo = (title) =>{
        console.log(title)
        this.setState({
            title:title
        })
    }
    render() {
        return (
            <div>
                我的名字叫:{this.state.title}
                <Demo addTodo = {this.addTodo} />
            </div>
        )
    }
}
export default Todo

子组件代码:

import React, { Component } from 'react'
class Demo extends Component {
    constructor(){
        super();
        this.state = {
            inputValue :'',
        }
    }
    handleInputValue = (e) =>{
        console.log(e.currentTarget.value);
        this.setState({
            inputValue:e.currentTarget.value
        })
    }
    handleAddBtn = () => {
        console.log(this.state)
        this.props.addTodo(this.state.inputValue)
    }
    render() {
        return (
            <div>
                <input 
                    type="text" 
                    value={this.state.inputValue} 
                    onChange={this.handleInputValue}    
                />
                <button onClick={this.handleAddBtn} >点击</button>
            </div>
        )
    }
}
export default Demo;

 方法传值:

this.handleInputValue.bind(this,123)

 通过ref获取组件或DOM，需先引入createRef方法来创建一个ref

constructor(){
        super();
        this.state = {
            inputValue :'',
        }
        this.inputDom = createRef()  //创建
    }

render() {
        return (
            <div>
                <input 
                    type="text" 
                    value={this.state.inputValue} 
                    onChange={this.handleInputValue}
                    ref={this.inputDom}    //调用
                />
                <button onClick={this.handleAddBtn} >点击</button>
            </div>
        )
    }

 handleInputValue = (e) =>{
        console.log(e.currentTarget.value);
        this.setState({
            inputValue:e.currentTarget.value
        },()=>{
            this.inputDom.current.foucs() //操作DOM
        })
    }

以上是 React组件通讯 的全部内容， 来源链接： utcz.com/z/383191.html