Question

我的页面有一个带有input的子组件。我正在尝试将此输入框的值用于父级的setState，即用户输入名称并按回车键，然后他们将input的值发送到父页面并习惯使用setState {( familyName: [insert string here] )}。

在子组件（称为面包屑）中：

<input type="text" id="familyNameText" />
<input type="button" onClick={this.props.setStateHandler} value="OK" />

在父母中：

  constructor(props) {
    super(props);
    this.state = ({ familyName: 'Oldfamily' });
    this.updateFamilyName = this.updateFamilyName.bind(this);
  }
  updateFamilyName(data) {
    this.setState({ familyName: data });
  }
  render() {
    return(
      <main>
        <UserMenu />
        <Header />
        <Breadcrumbs setStateHandler={this.updateFamilyName} /> {/* breadcrumbs.js will access this via 'this.props.setStateHandler' */}
        <Sidebar />
        <Layout>
          <h2>The {this.state.familyName} Family</h2>

但是，当我单击“确定”时，状态保持不变，控制台显示：

Uncaught Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, pageX, pageY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, movementX, movementY, isDefaultPrevented, isPropagationStopped}). in h2 (at familyinfo.js:27)

此错误是什么意思？为什么我的setState代码没有设置状态，而尝试从我的<h2>中的页面状态访问信息又有什么问题呢？

Answer 1

由于您将处理程序直接传递给事件处理程序，因此它将与事件对象一起调用，因此您需要获取值并将其设置为状态

  updateFamilyName(e) {
    this.setState({ familyName: e.target.value });
  }

由于您需要输入的值，因此您可能应该将其添加到子状态onChange并将其传递回父onSubmit

<input type="text" id="familyNameText" onChange={(e) => this.setState({value: e.target.value})} value={this.state.value}/>
<input type="button" onClick={() => this.props.setStateHandler(this.state.value)} value="OK" />

并像使用它

  updateFamilyName(data) {
    this.setState({ familyName: data });
  }

Answer 2

这可能是因为您在updateFamilyName函数中获得的数据对象不是字符串而是对象。

您需要浏览此对象以查看要查找的属性，可以尝试：

data.target.value

首先将对象打印到控制台以查看得到的内容。

Answer 3

从孩子（data）返回的参数是event handler object。
因此，您可以从此对象获取target.value：

updateFamilyName(data) {
    this.setState({ familyName: data.target.value });
}

反应：如何基于子组件中的数据设置状态？

3 个答案: