Передать значения другому компоненту в React Final Form

Question

Использование примера формы мастера для создания компонента с текущими значениями ввода. Как ни странно, компоненты идентичны, но только Wizard компонент возвращает объект с начальными значениями, когда Slider Компонент возвращает пустой объект. Самое главное, можно ли обновлять значения?

 class Slider extends React.Component {

        constructor(props) {
          super(props)
          this.state = {
            page: 0,
            values: props.initialValues || {}
          }
        }


        render() {
           const { values } = this.state
           console.log(values);
          return (
            <div></div>
          )
        }
      }

ОБНОВИТЬ

Моя проблема заключается в стилизации диапазона типов ввода: https://codesandbox.io/s/w65rq7ok4w. Попытка создать компонент, который будет возвращать div с динамически изменяющейся шириной, которая будет зависеть от значения диапазона входного типа, например, прогресс Input Range с градиентом css

Answer 1

Вам нужно создать parent component всех ваших дочерних форм, которые содержат состояние. Вот пример:

 class Slider extends React.Component {

 constructor(props) {
   super(props)
   this.state = {
     page: 0,
     values: props.initialValues || {
       employed: false,
       otherKey: "otherValue"
     }
   }

   this.handleUpdate = this.handleUpdate.bind(this);
   this.nexPage = this.nexPage.bind(this);
 }


 handleUpdate(nextValues) {
   this.setState({ values: { ...this.state.values, nextValues} });
 }

 nextPage() {
   this.setState({ page: this.state.page + 1 });
 }

 renderForm(){
   const { values } = this.state;
   switch(page) {
     case 3: return <ThirdForm {...values}/>;
     case 1: return <AnotherForm {...values} />;
     default: return <FirstForm {...values}/>;
   }
 }

  render() {
   const { values } = this.state
   console.log(values);
   return (
     <div>
      {this.renderForm()}
     </div>
   )
  }
}

Таким образом, ваши значения сохраняются на месте и изменяются только handleUpdate метод родительского компонента.

Родительский компонент будет передавать его данные дочернему компоненту, когда дочерний компонент onChange метод пожаров. Вот пример (другие формы такие же...):

class FirstForm extends React.Component {

 handleChange(e) {
   this.props.handleUpdate({ [e.target.name]: e.target.value });
 }

 handleSubmit(e) {
   e.preventDefault();
   this.props.nextPage();
 }

 render() {
   const { value1 } = this.props;
   return(
     <form onSubmit={this.handleSubmit.bind(this)}>
       <input name="value1" value={value1} onChange={this.handleChange.bind(this)}/>
     </form>
   );
 }
}

Настроить атрибуты name является ключом и value в качестве значения для ваших входов и передать его родительскому компоненту через childs handleChange метод и родители handleUpdate метод.

Когда отправляете огонь, вы должны изменить страницу родительским методом nextPage,

Редактировать:

Для стиля ввода ширины (диапазон min[0] max[100]):

render() {
 const { values: { rangeValue } } = this.state;  
 return(
  <div style={{ width: `${rangeValue}%` }}></div>
 );
}