怎么在react中获取兄弟组件的真实dom?

Question

用react做的一个页面，效果如下：

页面上有两个组件：组件1和组件2，它们是兄弟组件。组件1上有一个button，组件2上有两个input：input-1和input-2。

现在想点击组件1中的button时获取组件2中的两个input的内容，要怎么写啊？？？

Answer 1

你应该为组件一和组件二嵌套一个父组件，组件二的input-1和input-2是可变值，应作为父组件的两个状态，组件一的点击后提交父组件的这两个状态。

// 父组件
state = {
    input1: null,
    input2: null
}
handleInput1Change (value) { 
    this.setState({input1: value})
}
handleInput2Change (value) { 
    this.setState({input2: value})
}
handleClick () {
    // 获取值
    post(this.state.input1, this.state.input2)
}
render () {
    <div>
        <ButtonComponent onClick={this.handleClick}/>
        <InputComponent onInput1Change={ this.handleInput1Change } onInput2Change={ this.handleInput2Change }/>
    </div>
}

组件二

render () {
    return () {
        <div>
            <input type='text' onChange={ (event) => { this.props.onInput1Change(event.target.value) } } />
            <input type='text' onChange={ (event) => { this.props.onInput2Change(event.target.value) } } />
        </div>
    }
}

Answer 2

给你一个思路及简要的写法
方法1
当然是一个父组件包涵你的组件1和组件2，例如父组件是这样的

class ComponentsFather extends React.Component {
    constructor(props) {
        super(props);
        this.getValue = this.getValue.bind(this);
        this.changeInputOne = this.changeInputOne.bind(this);
        this.changeInputTwo = this.changeInputTwo.bind(this);
        this.state={
            value1:'',
            value2:'',
        }
    }
    getValue() {
        console.log(this.state.value1,this.state.value2)
    }
    changeInputOne(e) {
        this.state.value1=e.target.value
    }
    changeInputTwo(e) {
        this.state.value2=e.target.value
    }
    render() {
        //组件2 两个input
        const { value } = this.state;
        return(
            <div>
                <ComponentsOne btnFUn={this.getValue}></ComponentsOne>
                <ComponentsTwo needValue={value} changeInputOne={this.changeInputOne} changeInputTwo={this.changeInputTwo}></ComponentsTwo>
            </div>
        )
    }
}

两个子组件，组件1

class ComponentsOne extends React.Component {
    constructor(props) {
        super(props);
        
    }
    render() {
        //组件1 button
        return(
            <div>
                <button onClick={this.props.btnFUn}>组件1的button</button>
            </div>
        )
    }
}

组件2

class ComponentsTwo extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        //组件2 两个input
        return(
            <div>
                <input type="text" onChange={this.props.changeInputOne} />
                <input type="text" onChange={this.props.changeInputTwo}/>
            </div>
        )
    }
}

这样就可以点击按钮获得相应的内容了.

方法2 用refs这个属性，父组件调用子组件的方法，当然前提是你的这个组件没有被其他的包住，例如redux中connect了这个组件后这个方法就不适用了。直接看代码吧 正好都给你写了，不懂的在提问

class ComponentsOne extends React.Component {
    constructor(props) {
        super(props);
        
    }
    render() {
        //组件1 button
        return(
            <div>
                <button onClick={this.props.btnFUn}>组件1的button</button>
            </div>
        )
    }
}

class ComponentsTwo extends React.Component {
    constructor(props) {
        super(props);
        this.changeInputOne = this.changeInputOne.bind(this);
        this.changeInputTwo = this.changeInputTwo.bind(this);
        this.backFun = this.backFun.bind(this);
        this.state = {
            value1:'',
            value2:''
        }
    }
    changeInputOne(e) {
        this.state.value1=e.target.value
    }
    changeInputTwo(e) {
        this.state.value2=e.target.value
    }
    backFun(){
        const { value1 , value2 } = this.state;
        return { valueOne:value1,valueTwo:value2}
    }
    render() {
        //组件2 两个input
        return(
            <div>
                <input type="text" onChange={this.changeInputOne} />
                <input type="text" onChange={this.changeInputTwo}/>
            </div>
        )
    }
}

class ComponentsFather extends React.Component {
    constructor(props) {
        super(props);
        this.getValue = this.getValue.bind(this);
        
    }
    getValue() {
        console.log('123',this.refs.back.backFun())
    }
    render() {
        //组件2 两个input
        return(
            <div>
                <ComponentsOne btnFUn={this.getValue}></ComponentsOne>
                <ComponentsTwo ref="back"></ComponentsTwo>
            </div>
        )
    }
}

Answer 3

嗯，同意楼上的思路，React把响应界面交互==状态（state）的转变，尽可能不去直接操作DOM……
如果这时候你需要对兄弟组件之间进行交互，需要在共同的父级上初始化一个state，通过子组件的交互改变state来进行兄弟间的交互；