时间戳

首页 > 解决方案 > 来自 JSON 的 React Dynamic 中的状态管理

javascript - 来自 JSON 的 React Dynamic 中的状态管理

问题描述

我有一个以这种方式模板化的动态表单：

class betClient extends Component(
  state = {
    .............
  }
  ................

  const ServerConfigDetails = this.state.ServerConfigDetail.map(field => {

    let SecretFields = "access_token" || "api_token" || "private_token" || "password" || "security_token" || "client_secret" || "refresh_token" || "oauth_client_id" || "oauth_client_secret" || "developer_token"
    if (field.name === SecretFields) {
      return <SecretInput inputlabel = {
        field.name == SecretFields ? field.name : null
      }
      placeholder = {
        field.placeholder
      }
      />
    }
    if (field.name === "start_date") {
      return <SelectDateInput inputlabel = "Start Date" / >
    }
    if (field.name === "end_date") {
      return <SelectDateInput inputlabel = "End Date" / >
    }


    // Here we template all other fields that aren't date or secret field
    if (field.name !== SecretFields) {
      return <TextInputs inputlabel = {
        field.label == null ? field.name : field.label
      }
      placeholder = {
        field.placeholder
      }
      />
    }
  })
  render() {
    return (
          <div>
           <Modal>
             <form> 
              {ServerConfigDetails}
            </form>
           </Modal>
         </div>
     )
  }
)

一切正常，表单是动态呈现的，但我不知如何不知道如何将表单输入最好作为一个对象进入一个状态，而不必在初始状态下单独声明每个字段。有什么帮助吗？

不确定这是否足够清楚，但我很乐意提供任何额外的信息。

标签： javascriptreactjsobjectreact-state-management

解决方案

我首先建议，我们应该决定我们的状态如何——

{
selects: {
 // With individual keys with default values
},
dynamic: {} // no key-value pairs at first
}

然后让你所有的组件——受控——你通过传递一个 value 属性来控制要设置的内容（最后传递给你的本地输入）


const { selects, dynamic } = this.state;

// pass a value prop as selects.<key-name> or empty string

最后为您的选择和动态输入字段组件添加 onChange 处理程序。（最后传递给您的本机输入）

onChangeSelectField (event, fieldName) {}
//Same for InputField

这些处理程序将处理状态，如果事件目标中的值不存在，则添加键；如果输入了新值，则添加替换（覆盖）当前键值。

{
    const currentDynamicData = this.state.dynamic;
    const newData = { ... currentDynamicData, {... updatedData}}; // updatedData is newer key-value pair

this.setState({ dynamic: newData });
}

这是一种解决方法。

推荐阅读