Question

我有2个反应成分。在子组件中我有一个textfield：

var React = require('react');
var  UserInput = React.createClass({
  getInitialState: function() {
    return {ItemTotype: ''};
  },


   handleUserInput: function(e){
    // console.log(e.target.value);
     this.setState({ItemTotype: e.target.value});
   },

正如您所看到的，每当用户在文本框中输入内容时，我都会更新应用程序的状态。

然后我想将插入的数据插入到我的父组件中的状态。

并且这样做我用过 `在父组件（根）：

console.log(this.state.data);

但它只给了我一个[]。我也试过console.log(this.state.data.ItemTotype);，但这次是undefine。

我该怎么办？

paernt组件是：

define(["./Statistic","./UserInput","./RandomWords","react", "react-dom"],
  (Statistic,UserInput,RandomWords,React, ReactDOM) => {

      var Root = React.createClass({

    loadItemTypedFromServer: function() {
      console.log("Hey");
      console.log(this.state.ItemTotype);

     },

     getInitialState: function() {
       return {data: []};
     },

     componentDidMount: function() {
       this.loadItemTypedFromServer();
       setInterval(this.loadItemTypedFromServer, 1000);
     },

        render: function() {
          return (
            <div >
              <h1>Welcome to our game</h1>
              <RandomWords/> 
              <UserInput  />
              <Statistic/>
            </div>
          );
        }
      });

      ReactDOM.render(
        React.createElement(Root, null),
        document.getElementById('content')
      );
});

Answer 1

使用回调，卢克。这是将数据从子节点传递到父节点的唯一方式。

const Child = React.createClass({
  render() {
    const { onChange, value } = this.props;
    return <textarea onChange={onChange} value={value} />;
  }
})

var Parent = React.createClass({
  getInitialState() {
    return {data: ''};
  },

  onChange(event) {
    this.setState({data: event.target.value});
  },

  render() {
    return <Child onChange={this.onChange} value={this.state.data} />;
  }
});

ReactDOM.render(<Parent />, document.getElementById('container'));

Answer 2

您可以将父状态作为'props'传递给子组件。在子组件中，您可以使用this.props.yourProp访问道具。这是一个超级抽象的例子，只是为了让您了解如何在某个子组件中获取父状态。

React：获取父组件中的状态数据

2 个答案: