REACT 多重注册

Question

我有 React 的问题，所以我创建了脚本但它不起作用。

这应该：

渲染第一个状态步骤（正在运行）（组件优先）
这是错误，它没有看到默认值。（姓名和电子邮件
点击“保存并继续”后，它应该将文件保存到数据中。
并在案例中进行后续步骤。

错误是

bundle.js:34147 未捕获的引用错误：未定义电子邮件

 function send(e){
  e.preventDefault()
}




function nextStep(){
  this.setState({
    step:this.state.step + 1
  })
}

function nextStep(){
  this.setState({
    step:this.state.step - 1
  })
}


function saveAndContinue(e) {

  e.preventDefault()
  // Get values via this.refs
  var data = {
    name     : this.refs.name.getDOMNode().value,
    email    : this.refs.email.getDOMNode().value,
  }

  this.props.saveValues(data)
  this.props.nextStep()
};



var fieldValues = [
   name     : null,
   email    : null,
];


function saveValues(fields) {
    return (
        fieldValues = Object.assign({}, fieldValues, fields)
    );
}


class Registration extends React.Component{

  constructor () {
    super()
    this.state = {
      step:1
    }
  }

    render() {
        switch (this.state.step) {
            case 1:
            return <First fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            previousStep={this.previousStep}
                            saveValues={this.saveValues} />
            case 2:
            return <Two fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            previousStep={this.previousStep}
                            saveValues={this.saveValues}/>
            case 3:
            return <Third fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            previousStep={this.previousStep}
                            saveValues={this.saveValues}/>
            case 4:
            return <Success fieldValues={fieldValues} />
        }
    }
}



class First extends React.Component{



  render(){
    return(
      <form onSubmit ={send}>
            <div className="group">
                  <input className="text" type="text" ref="name" defaultValue={this.props.fieldValues.name}/>
                  <span className="highlight"></span>
                  <span className="bar"></span>
                  <label>Write Name</label>
            </div>
            <div className="group">
                 <input className="text" type="email" ref="email" defaultValue={this.props.fieldValues.email} />
                 <span className="highlight"></span>
                 <span className="bar"></span>
                 <label>Write Your Mail</label>
            </div>
           <button onClick={this.saveAndContinue}>Save and Continue</button>
      </form>
)
}
}

Answer 1

您的代码中没有第二个、第三个和成功 class，所以我假设它们与第一个 class 相似。

全局函数不需要 this 关键字。但是在这种情况下，如果需要访问状态，则必须将 saveAndContinue 放在 First class 中。
在 React 中，通常您不必为输入设置默认值。
Link状态的输入值，然后setState在onChange事件中。
placeholder中的字符串在状态为空时显示。

下面的代码展示了如何在 React 中使用输入标签：

<input
  value={this.state.inputValue}
  onChange={e => {
    this.setState({ inputValue: e.target.value });
  }}
  type="text"
  placeholder="default value"
/>

请注意，状态将更新 onChange 而不是单击保存按钮。

这是否解决了您的问题？

REACT 多重注册

REACT Multiple Registration

forms

reactjs

registration