Управление состоянием в React Dynamic из JSON

У меня есть динамическая форма, созданная таким образом:

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>
     )
  }
)

Все работает нормально, форма визуализируется динамически, но я почему-то не знаю, как получить входные данные формы желательно как объект в состояние без необходимости объявлять каждое поле отдельно в начальном состоянии. Любая помощь с этим?

Не уверен, что это достаточно ясно, но я с удовольствием предоставлю любую дополнительную информацию.


reactjs javascript object react-state-management
person Paschal    schedule 28.11.2020    source источник
comment
Отвечает ли это на ваш вопрос? Получить данные формы в ReactJS   -  person Randy Casburn    schedule 29.11.2020
comment
@RandyCasburn, нет, не совсем, я знаю об этом варианте, но в нашем случае с ним будет сложно справиться. Мне было интересно, могу ли я получить данные формы без ручного создания объекта состояния с каждым полем в качестве ключа - всего 64 возможных поля, которые можно случайным образом сопоставить для создания отдельных форм.   -  person Paschal    schedule 29.11.2020
comment
Тогда FormData — ваш друг. Некоторые из них также могут помочь: для реализации динамической формы с контролируемыми компонентами в reactjs">stackoverflow.com/questions/42316604/ -- stackoverflow.com/questions/42387559/ --   -  person Randy Casburn    schedule 29.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я бы посоветовал сначала решить, как может выглядеть наше государство...

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

Затем сделайте все свои компоненты - контролируемыми - вы контролируете, что устанавливать, передавая значение (и, наконец, переходя к вашим собственным входам)


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

Это способ сделать это.

person pritam    schedule 28.11.2020