编辑：

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

将值传递给React Final Form

1 个答案:

编辑：