javascript - 无法使用用户输入刷新文本框状态，尽管使用 setState 仍保持默认状态

Question

我有一个 React 文件，它将城市数据列表显示为组件。其上方有一个输入文本框，需要接受用户输入。我正在使用 state 在文本框中显示初始字符串，但我无法让 onChange 成功使用函数来 setState。使用 console.log 进行故障排除，我可以看到，当我尝试更改状态时，我用 onChange 指向的函数确实起作用并更改了一个字母，但随后状态又恢复为默认值。问题似乎是 setState 不保存更改并在进行任何更改后恢复到初始状态。文本框内容似乎根本没有改变，认为 console.log 显示一个字母的更改，但随后恢复到原始状态。

如何更新状态？我希望用户能够输入一个数字，然后将其与列表进行比较。

import React, {Component} from 'react';
import Table from './Table';
import cities from './Cities';


class App extends Component {

state = {
    userInput: "Your City Population"
}


popChanger = (event) => {
    this.setState( {userInput: event.target.value} );
    //console.log(event.target.value);
}

yourCity = (
    <div>
        <input 
            type='text' 
            onChange={this.popChanger}
            value={this.state.userInput}
            />
    </div>
)


render() {



    return (

        <div className = "App">
            {this.yourCity}
            <Table characterData = {cities} />
        </div>
    );
}
}

export default App;

Answer 1

setState() 正在保存您的更改，只是位置不正确，

popChanger() 是一个箭头函数，用于更新 App 组件的状态，yourCity 有自己的 this，因此它不知道 App 状态。

您可以将 yourCity 更改为返回您想要的 html 的箭头函数，例如

class TodoApp extends React.Component {

    state = {
        a: ''
    };

    YourCity = () => (
        <div>    
          <input type="text" onChange={this.handleChange} value={this.state.a} />
        </div>
    }


    handleChange = e => this.setState({a : e.target.value})

    render() {
        return (
          <div>
            <this.YourCity />

          </div>
        )
    }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

或者，在外部创建 yourCity 组件并将 handleChange 作为 prop 传递:

const YourCity = props => (
        <div>    
          <input type="text" onChange={props.handleChange} value={props.value} />
        </div>
    )

class TodoApp extends React.Component {

    state = {
        a: ''
    };


    handleChange = e => this.setState({a : e.target.value})

    render() {
    return (
      <div>
        <YourCity handleChange={this.handleChange} value={this.state.a}/>

      </div>
    )
    }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))