-2

在第一步结束之前一切都很好，但是当我写下“tempPhone”号码以确认 [第一步][1]

输入区域看起来像那样（单击第一个按钮后输入字段必须为空），我没有弄清楚这个问题。为什么会这样？
[1]：https ://i.stack.imgur.com/qXYB3.png [2]：https ://i.stack.imgur.com/wRc4W.png

[问题][2]

  import React, { Component } from 'react'; 
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {

  constructor() {
    super();

    this.state= {
      otpContent: "",
      input: "",
      tempPhone:"123",
      tempPin: "123456",
      errorMsg: ""
    }

    this.handleChange = this.handleChange.bind(this);
    this.handlePhoneSubmit = this.handlePhoneSubmit.bind(this);
    this.handlePinSubmit = this.handlePinSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value});
  }

  phoneInput() {
    this.setState(
      {
        otpContent: <div>
            <input type="text" name="input" onChange={this.handleChange}/>
            <button onClick={this.handlePhoneSubmit}> Dogrula!</button>
        </div>
      }
    );
  }

  handlePhoneSubmit() {
    if(this.state.input === this.state.tempPhone){
      this.setState(
        {
        input: ''
        }
      );
      this.pinInput();

    }
    else {
      this.setState({
        errorMsg: "wrong phone"
      });
    }
  }

  pinInput() {
    this.setState(
      {
        input: '',
        otpContent: (<div>
            <input
 type="text" name="input" onChange={this.handleChange}/>
            <button onClick={this.handlePinSubmit}> Pin Dogrula!</button>
        </div>)
      }
    );
  }

  handlePinSubmit() {
    if(this.state.input === this.state.tempPin){
      this.setSuccess();
    }
    else {
      this.setState({
        errorMsg: "wrong pin"
      });
    }
  }

  setSuccess() {
    this.setState(
      {
        otpContent: (<div>
            <h3>Success!</h3>
        </div>)
      }
    );
  }

  componentDidMount() {
    this.phoneInput();
  }

  render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Hi</h1>
          </header>
          <div className="App-intro">
           {this.state.otpContent}
           {this.state.errorMsg}
          </div>
        </div>
    );
  }
  }
  export default App;
4

2 回答 2

0

您的处理输入逻辑有点缺陷。您正在尝试使用受控输入元素，但同时您需要为其设置一个值，我认为这是一个不好的组合。我正在举一个例子，但我对组件逻辑的改变太多了。如果它不适合您，只需检查此答案作为示例。

因为我从未见过它（但谁知道呢？），所以我没有在该状态下持有任何 JSX，我已经更改了一些渲染内容和消息逻辑。我还使用了类字段和箭头函数，因此无需将它们绑定到this.

class App extends React.Component {
    state = {
      input: "",
      tempPhone: "123",
      tempPin: "123456",
      msg: "",
      confirm: false,
    }

  handleChange = e => this.setState({ [e.target.name]: e.target.value });

  handlePhoneSubmit = () => {
    if (this.state.input === this.state.tempPhone) {
      this.setState({confirm: true, input:""});
    }
    else {
      this.setState({
        msg: "wrong phone"
      });
    }
  }

  handlePinSubmit = () => {
    if (this.state.input === this.state.tempPin) {
      this.setState({msg: "Success"});
    }
    else {
      this.setState({
        msg: "wrong pin"
      });
    }
  }

  phoneInput = () => (
    <div>
      <input type="text" value={this.state.input} name="input" onChange={this.handleChange} />
      <button onClick={this.handlePhoneSubmit}> Dogrula!</button>
    </div>
  );


  pinInput = () => (
    <div>
      <input
        type="text" value={this.state.input} name="input" onChange={this.handleChange} />
      <button onClick={this.handlePinSubmit}> Pin Dogrula!</button>
    </div>
  ) 


  render() {
    return (
      <div className="App">
        <div className="App-intro">
          {!this.state.confirm
            ? this.phoneInput()
            : this.pinInput()
            }
          {this.state.msg}
        </div>
      </div>
    );
  }
}

不过，此代码可以改进。例如可能有一个 Input 组件，我们可以传递一些 props 来渲染不同的输入和按钮。但它现在可以根据您的需要工作。

于 2018-07-16T07:44:09.373 回答
0

您可以使用受控组件 ( docs ) 来处理这种情况。在这里，您需要处理onChange并将更改的值传递给 input。按下按钮重置该值

 <input
   value={this.state.textValue} // whatever value you put in textValue state will be the text appear in input box on UI so 
   type="text"
   onChange={e => this.handleTextChange(e.target.value)}
 />

密码箱：在这里

于 2018-07-16T06:53:32.130 回答