在反应中传递输入状态

Question

我有一个包含此代码的反应类：

  getInitialState: function(){
    return {
      results: false,
      value: ''
    };
  },

  handleClick: function(event) {
    this.setState({ results: true });
    event.preventDefault();
  },

  handleChange: function(event){
    this.setState({value: event.target.value})
  },

    <input type="text" id="playerName" value={this.state.value} onChange={this.handleChange} placeholder="name" />

在另一个 REACT 课程中

我有：

myFunc: function() {
    this.setState({info: true})
    let name = this.props.value;
    console.log(name) --> returns undefined
  },

我怎样才能命名为等于用户输入的名称，方法是将它从一个反应类传递到另一个反应类

我可以发布更多代码，但我认为 props 是在其他地方传递您需要的代码的方式。 this.state.value 也返回 undefined

编辑：

myFunc 在此处调用：

<input type="submit" value="I can play" onClick={() => this.myFunc()}/>

Answer 1

最简单的方法是拥有一个容器组件，这个容器组件将处理所有状态管理并包裹子组件：

<WrapperComponent>
 <Input/>
 <Info />
</WrapperComponent

如果你想做去抖动之类的事情，你的输入仍然可以有自己的状态，但是包装器组件将有自己的函数来设置自己的状态，并将这些函数传递给输入，以便输入可以调用它们它的新值，然后包装器组件将更新，然后 Info 组件将从包装器组件接收其值道具，一切都将同步。

这是一个示例代码笔http://codepen.io/finalfreq/pen/VKPXoN

class Wrapper extends React.Component {    
  constructor() {
  super();
    this.state = {
      value: 'default'
    }
  }

  _handleChange = (value) => {
    this.setState({value: value})  
  };

  render() {
    return (
      <div>
       <Input onChange={this._handleChange} value={this.state.value}/>
       <Info value={this.state.value} />
      </div>
    )
  }
}

class Input extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.value
    }
  }

  onChange = (e) => {
    this.setState({value: e.target.value});
    this.props.onChange(e.target.value);
  };

  render() {
    return <input type="text" value={this.state.value} onChange={this.onChange} />
  }
}

const Info = (props) => {
  return (
   <h1> {props.value} </h1>
  )
}


ReactDOM.render(<Wrapper />,document.getElementById('app'));

显然，您可以轻松地将其转换为使用 createClass 版本，而不必使用 es6 版本。这里的主要内容是，如果您想在不直接相关的组件之间共享值，那么您肯定会想要一个处理所有事情的状态容器组件。

这是一篇很棒的文章，介绍了容器与演示组件 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0