Question

我正在尝试更新在输入字段中键入的文本字段

这是我到目前为止所做的

constructor() {
    super();
    this.state = {
      text: ""
    };
  }

  changeText(evt){
    let txt = this.state.text ;
    txt = evt.target.value
    this.setState({
       text: txt
    })
}

   render() {
     return(
       <div>
          <input name="option" type="text" onPress={(evt) => changeText(evt)}/>
          <div>{this.state.text}</div>
       </div>
     )  
  }

更新输入元素时没有显示结果

Answer 1

您必须将input的值设置为状态<input name="option" type="text" value={this.state.text} onPress={(evt) => changeText(evt)}/>

Answer 2

您可以在输入字段中使用onChangeText，然后在想要显示它的任何地方使用状态值，例如：

onChangeText{(value)=>this.setState({text: value })}

Answer 3

检查此堆叠闪电战

https://stackblitz.com/edit/react-ntkqxw

您需要更改onPress to onChange和changeText(evt) to this.changeText(evt)

Answer 4

您需要这样做。易于阅读和重复使用。

状态将在表单元素的名称上创建。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component{
constructor() {
    super();
    this.state = {
      option: ""
    };
  }

  changeText = evt =>{
      this.setState({[evt.target.name]:evt.target.value})
  }

   render() {
    return(
      <div>
          <input name="option" type="text" value={this.state.option} onChange={this.changeText} />
          <div>{this.state.option}</div>
      </div>

    )  
  }
}

render(<App />, document.getElementById('root'));

如何在更新输入时显示文本

4 个答案: