Question

在Reactjs中，如果我有一个App组件的两个子组件，我可以从一个组件获取输入并将其输出到另一个子组件中吗？

class App extends Component{

    render(
       <Input/>  
       <Output/>  
    )

}

Input = () => { //input } 



Output = () => { //output }

Answer 1

这很简单。对父组件中的两个组件使用相同的状态值：

account/userInfo

Answer 2

您可以通过将处理程序传递给Input组件来处理App组件中的数据然后将状态值向下传递给输出组件，如

const Input = props => <input onChange={props.handleChange} />
const Output = props => <span>{props.data}</span>

class App extends Component {
  state = {data:""}
  handleChange = e => {
    this.setState({ data: e.target.value })
  }
  render() {
    return (
      <div>
        <Input handleChange={this.handleChange} />
        <Output data={this.state.data} />
      </div>
    )
  }
}

Answer 3

`export class Parent extends React.Component{
     constructor(props){
         super(props);
         this.state={
             name:'',
             sendData:false
         }
     }

      render(){
          return (<div><input type="text" onChange={(event)=> 
              {this.setState({
                    name:event.target.value,

               })
           }) 
           />
            //sendData can be made true on a  button click
            {this.state.sendData ?(<div><Child name={this.state.name} 
                                   />
                                   </div>):null}
      </div>)}
 }`

在子组件中显示Parent的数据。

   `export class Child extends React.Component{
     render(){
          return (<div>Name is :{this.props.name}</div>) 
      }
    }`

获取子组件中的输入并将其输出到Reactjs中的另一个子组件中

3 个答案: