Question

一切正常，直到第一步结束，但是当我输入“ 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;

Answer 1

您可以通过使用受控组件（docs）处理这种情况。在这里，您需要处理onChange并将更改后的值传递给输入。按下按钮，重置该值

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

codesandbox：here

Answer 2

您处理输入逻辑有些缺陷。您正在尝试使用受控输入元素，但同时您需要为其设置一个值，我认为这是一个不好的组合。我举一个例子，但是我改变了组件逻辑。如果不合适，请以示例为例。

由于我从未见过它（因此谁知道？），所以我没有在该状态下保存任何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组件，我们可以传递一些道具来渲染不同的输入和按钮。但是，它现在可以根据您的需求运行。

React js的输入字段问题

2 个答案: