将值传递给React Final Form中的另一个组件

Question

Using Wizard form example to create component with current input values. Strangely enough, components are identical, but only Wizard component returns object with initial values, when Slider component returns empty object. Most important, is it possible to keep values updated?

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

UPDATE

My problem is input type range styling: https://codesandbox.io/s/w65rq7ok4w . Trying to create a component that would return div with dynamically changing width that would depend from input type range value eg Input Range progress with css gradient

Answer 1

You need to create parent component of all your child forms which contain state. Here is example:

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

So your values store in on place, and changes only by handleUpdate method parents component.

Parent component will be pass it data to child component when child component onChange method fires. Here is example(other forms same...):

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

Set up attributes name is a key and value as value to your inputs and pass it to parent component through childs handleChange method and parents handleUpdate method.

When submit fires, you need to change page by parent method nextPage .

Edit:

For input width styling(range min[0] max[100]):

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