React js 的输入字段问题

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。在按下按钮时重置该值

 <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，因为我从未见过它（但谁知道呢？），我更改了一些渲染内容和消息逻辑。我还使用了 class 字段和箭头函数，因此无需将它们绑定到 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 来渲染不同的输入和按钮。但它现在可以根据您的需要工作。

React js 的输入字段问题

Input Field Issue On React js

field

input

reactjs