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} />;
  }
}

父组件必须传递一个函数作为prop，以便它可以知道子组件中发生的更改。

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属性将TextInput函数传递给onChange。道具名称onChange可以是任何东西。

这里正在code sandbox link处测试此代码。

Answer 2

我有一个返回通用组件的函数，我想知道是否有可能从该组件获取状态值？

这不是React的方式。相反，您应该设计组件，以便父级保留所需的所有状态。然后，父级将其状态作为道具传递给其子级组件。

如果父组件需要了解其子组件中发生的事件，则应将回调从父组件传递给子组件。然后，当事件发生时，孩子会调用此函数以通知父母，然后父母可以更新其状态。

此外，状态应仅包含数据，而不是JSX组件。您可以存储状态列表的数据并在render()中对其进行迭代以创建必要的组件。因此，例如，如果您有一个方法可以调用

this.setState({items: ['foo', 'bar']});

然后在渲染中，您可以执行类似的操作

return <div>
    {this.state.map(item => <DataTable name={item}/>}
    </div>

Answer 3

实际上可以通过在子组件中传递对象并设置对象属性

const TextInput = props => {
    let holder = {
        getChildState: null
    };

    return (
        <div>
            <TextBox {...props} type="text" multiline={false} id={generateId()} holder={ holder }/>
        </div>
    );
}

class TextBox extends Component {
  constructor(props) {
    super(props);

    this.state = {
        value: null,
        error: false,
        errorMsg: null,
    };

    this.props.holder.getChildState = () => this.state;
  }

  ....
}

因此，如果您的TextInput比使用owner.getChildState（）更为复杂，则只有在构造TextBox之后才可用。

还有使用emitter的其他可能性。

但是您绝对应该确定自己在做什么，因为仅使用向下的道具共享会更加简单方便，尤其是考虑到这是react的哲学。如果您认为某个组件应该向其他几个组件报告其状态，则可以尝试redux

React.js从子组件获取状态值

3 个答案: