2

使用向导表单示例创建具有当前输入值的组件。奇怪的是，组件是相同的，但是当组件返回空对象时，只有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，该宽度取决于输入类型范围值，例如使用 css 渐变的输入范围进度

4

1 回答 1

0

您需要创建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值，并通过 childshandleChange方法和 parentshandleUpdate方法将其传递给父组件。

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

编辑：

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

render() {
 const { values: { rangeValue } } = this.state;  
 return(
  <div style={{ width: `${rangeValue}%` }}></div>
 );
}
于 2018-04-07T09:21:34.603 回答