时间戳

首页 > 解决方案 > 通过 React 中的嵌套组件向上传递数据

javascript - 通过 React 中的嵌套组件向上传递数据

问题描述

以一个想法为序言；我想我可能需要一个递归组件，但这超出了我目前使用本机 js 和 React 的能力，所以我觉得我现在对 React 有了瑞士奶酪的理解。

问题：

metafields我有一个包含metafield以下结构的对象数组：

{
  metafields: [
    { 0: 
      { namespace: "namespaceVal", 
        key: "keyVal", 
        val: [
          0: "val1", 
          1: "val2", 
          2: "val3" 
        ]
      }
    }, 
    ...
  ]
}

我的代码映射metafields到卡片中，并且在每张卡片中都有一个组件<MetafieldInput metafields={metafields['value']} />，在该组件中，值数组被映射到输入字段。总的来说它看起来像：

// App
render() {
  const metafields = this.state.metafields;
  return (
    {metafields.map(metafield) => (
      <MetafieldInputs metafields={metafield['value']} />
    )}
  )
}

//MetafieldInputs
this.state = { metafields: this.props.metafields}

render() {
  const metafields = this.state;
  return (
    {metafields.map((meta, i) => (
      <TextField 
        value={meta}
        changeKey={meta}
        onChange={(val) => {
          this.setState(prevState => {
            return { metafields: prevState.metafields.map((field, j) => {
              if(j === i) { field = val; }
              return field;
            })};
          });
        }}
      />
    ))}
  )
}

到目前为止，一切都正确显示，我可以更改输入！但是，更改一次发生一个，因为我按下一个键，然后我必须单击返回输入以添加另一个字符。似乎所有内容都被重新渲染了，这就是为什么我必须重新点击输入以进行另一次更改。

我能以这种方式使用组件吗？感觉就像我正在努力嵌套组件，但我读过的所有内容都说不要嵌套组件。我是不是把这个问题复杂化了？我唯一的解决方案是撕掉 React 部分并将其带到纯 javascript 中。

指导将不胜感激！

标签： javascriptreactjscomponents

解决方案

您需要在应用程序级别执行 onChange。您应该只将 onChange 函数传递给 MetaFieldsInput 并this.props.metafields在渲染时始终使用

推荐阅读