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

Question

使用Wizard form example 创建具有当前输入值的组件。奇怪的是，组件是相同的，但只有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 progress with css gradient

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 作为输入值，并通过子handleChange 方法和父handleUpdate 方法将其传递给父组件。

提交触发时，需要通过父方法nextPage更改页面。

编辑：

对于输入宽度样式（范围 min[0] max[100]）：

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