Эффективный способ инициировать состояние хранения форм - PullRequest
Новая
       5

Эффективный способ инициировать состояние хранения форм

0 голосов
/ 29 августа 2018

Я работаю над довольно полной формой, и мне было интересно, есть ли умный способ помешать мне выполнить следующую инициализацию состояния: 

class Demo extends React.Component {



  state = { firstName = "",
            secondName = "" };
           //and so on...

  render() {
    const { firstName, secondName } = this.state;
    //and so on

    return (
      <div>
        <Form>
          <Form.Input
            placeholder="Name"
            name="name"
            value={firstName}
          />
         //and so on
        </Form>
      </div>
    );
  }
}

Если я не инициирую состояние с пустыми строками, я получаю следующее предупреждение:

Компонент изменяет неконтролируемый ввод текста типа на контролируется. Элементы ввода не должны переключаться с неуправляемого на контролируемый (или наоборот). Выберите между использованием контролируемого или неуправляемый элемент ввода для времени жизни компонента.

Какой современный способ борьбы с этим? Спасибо! Stefan

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

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

class Demo extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        firstName: '',
        lastName: '',
        submitted: false
    };
   }

   handleFirstName = (e) => {
         this.setState({firstName: e.target.value});
   }

   handleLastName = (e) => {
         this.setState({lastName: e.target.value});
   }
   handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });
        const payload = [{this.state.firstName, this.state.lastName}];
        this.props.saveData(payload);
   }

   render() {
    return(
        <form>
            <label>
                Firstname:
                <input type="text" value={this.state.firstName} onChange={this.handleFirstName} />
            </label>

              <label>
                Lastname:
                <input type="text" value={this.state.lastName} onChange={this.handleLastName} />
            </label>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>          
    );
  }
}

Лучшим решением для работы с формой является использование lib наподобие response-final-form

0 голосов
/ 29 августа 2018

Если вы используете значение в качестве значения состояния, тогда оно будет undefined в методе рендеринга, если вы не инициализируете состояние. Поэтому рекомендуется инициализировать ваше состояние, как вы делаете, потому что у вас есть контролируемые входы. Я верю, что это поможет вашему делу

...