javascript - 在 react 中传递输入状态

Question

我有一个包含以下代码的 react 类:

  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
  },

如何通过将用户输入的名称从一个 react 类传递到另一个 react 类来使名称等于用户输入的名称

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

编辑:

myFunc 在这里调用:

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

Answer 1

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

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

如果你想要进行去抖之类的事情，你的输入仍然可以有自己的状态，但是包装器组件将有自己的函数来设置自己的状态，并将这些函数传递给输入，以便输入可以调用它们它的新值，然后包装器组件将更新，然后信息组件将从包装器组件接收其值 Prop ，并且所有内容都将同步。

这是一个示例代码笔 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