Reactjs 从子组件获取状态值

Question

用另一个问题来回应新手（笑）。我有一个返回通用组件的函数，我想知道是否可以从该组件获取状态值？这是我想要做的：

编辑：我已经根据回复更新了我的一些代码

class CreateTable extends Component {
   constructor(props) {
        super(props_;

        this.state = { elements: [] };
    }

    handleCreateTable() {
        var elements = this.state.elements; // []
        elements.push(<TextInput key={"TableName"} label="Table Name" />)'
        elements.push(
                <DataTable
                    tableName = { elements[0].value } // <--- I'd like to do something like this
                />
            );
        this.setState({ elements: elements })
    }
}

TextInput 有一个孩子 TextField

感谢您的帮助！

Answer 1

我想要做的是从用户那里获取一些输入表名称并显示它。

您可以实现这一点的方法是让您的TextInput组件调用由父级传递的函数，并使用它具有的当前值。
所以你TextInput可能看起来像这样：

export default class TextInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

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

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

并且父组件必须传递一个函数作为道具，以便它可以知道子组件中发生的变化。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableName: ""
    };
  }
  onInputChage = value => {
    this.setState({
      tableName: value
    });
    console.log("I am Parent component. I got", value, "from my child.");
  };
  render() {
    return (
      <div className="App">
        <TextInput onChange={this.onInputChage} />
        <span>Table:{this.state.tableName}</span>
      </div>
    );
  }
}   

App组件正在将onInputChage函数传递给TextInputthrough onChangeprop。道具名称onChange可以是任何东西。

这是用于测试此代码的工作代码沙箱链接。