状态未定义

Question

我是新来的反应者，我收到状态和方法错误：

./src/App.js

第 5 行：’state’ 未定义 no-undef

第 8 行：’inputchangehandler’ 未定义 no-undef

到目前为止，这是我的代码：

 import React from 'react';
import './App.css';

function App() {
state = {
  userInput: ''
}
 inputchangehandler = (event) => {
    this.setState = ({
      userInput: event.target.value
    })
  }
  return (
    <div className="App">
      <input type="text" name="name"
      onChange={this.inputchangehandler}
      value = {this.state.userInput}/>
    </div>
  );
}

export default App;

原文由 Gobika Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在反应中有两种类型的组件。

1. 功能组件（就像你用过的）
2. 类组件

功能组件是无状态的（在旧版本中，您现在可以使用 hooks ）组件。因此，如果您想直接使用 state 您应该将组件更改为基于类的组件，如下所示：

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

class App extends Component {
state = {
  userInput: ''
}
 inputchangehandler = (event) => {
    this.setState = ({
      userInput: event.target.value
    })
  }
render(){
return (
        <div className="App">
          <input type="text" name="name"
          onChange={this.inputchangehandler}
          value = {this.state.userInput}/>
        </div>
      );
    }
}

export default App;

原文由 octobus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

功能组件没有状态，在 React 16.8 中我们有 Hooks 。

您应该使用 useState 挂钩状态。

 import React, {useState} from 'react';

const [userInput, setUserInput] = useState('')

用法，

 <input type="text" name="name"
      onChange={inputchangehandler}
      value = {userInput}/>

inputchangehandler 功能应该是，

 const inputchangehandler = (event) => {
    setUserInput(event.target.value)
}

演示

注意： 功能组件无权访问 this 。

原文由 ravibagul91 发布，翻译遵循 CC BY-SA 4.0 许可协议