ReactJS,material-ui TextField onChange无效

6
我正在使用ReactJS(版本15.5)和Material-UI(版本v0.20.1)。这段代码本应该能够正常工作,但实际上却不能。我一直以同样的方式使用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 });
}}
/>

1
请发布一些完整的代码。您也没有提到任何版本 - 您正在使用哪个版本的material-ui和react?当您说它不起作用时,您是指什么?它无法呈现,无法接受输入等吗? - Chris Cousins
好的,我已经相应地更新了我的问题。它可以渲染,但是它不接受输入并且onChange不起作用! - Adel
(event) => { this.setState({ event.target.value} )}(事件)=> { this.setState({ event.target.value} )} - Modig
@Modig,我已经尝试了这个方法,但是它没有起作用。我认为父组件出了问题,但我不知道具体是什么问题! - Adel
1个回答

10

你可以尝试这样做:

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 });
        }}
      />
    );
  }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接