ReactJS，material-ui TextField onChange 不起作用答案

【问题标题】：ReactJS, material-ui TextField onChange not workingReactJS，material-ui TextField onChange 不起作用
【发布时间】：2019-02-25 22:14:43
【问题描述】：

我正在使用 Material-UI（版本 v0.20.1）和 ReactJS（版本 15.5）。这段代码预计可以工作，但事实并非如此。我总是以相同的方式使用 TextField，但是在新组件中，我无法在输入中键入任何内容，并且 onChange() 没有触发。可能的原因是什么？甚至 onChange() 中的 'console.log' 都不显示！！！

import TextField from 'material-ui/TextField';

class Nav extends Component {

 constructor() {
   super();
     this.state = {
      searchValue: '',
     }...

我像往常一样使用 TextField：

<TextField
  value={this.state.searchValue}
  onChange={(event, value) => {
  this.setState({ searchValue: value });
}}
/>

【问题讨论】：

请发布一些完整的代码。您也没有提到任何版本 - 您使用的是什么版本的 material-ui 和 react？当你说它不起作用时，你是什么意思？它不渲染，不接受输入等吗？
好的，我已经相应地更新了我的问题。它呈现，但它不接受输入并且 onChange 不起作用！
(event) => { this.setState({ event.target.value} )}
@Modig，我做了这个，但是没用，我觉得是父组件有问题，但是不知道是什么问题！

标签： reactjs material-ui

【解决方案1】：

你可以试试这样的：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchValue: ""
    };
  }
  render() {
    console.log(this.state.searchValue); // I just left it here so that you can see in console that state is changing
    return (
      <TextField
        defaultValue={this.state.searchValue}
        onChange={event => {
          const { value } = event.target;
          this.setState({ searchValue: value });
        }}
      />
    );
  }
}

【讨论】：