Syntax error: Unexpected token (45:16) on handleChange in React JS

Question

我正在尝试使用状态获取 TextField 的值。我在上面添加了 onChange 并调用了 handleChange.

class App extends Component {
  constructor(props) {
    injectTapEventPlugin();
    super(props);
    this.state = { open: false, noteVal: "" };
    console.log(this.state);
  }

  handleOpen = () => {
    this.setState({ open: true });
    console.log(this.state);
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleCreateNote = () => {
    console.log("Hey");
  };

  handleChange: function(event) {
    this.setState({noteVal: event.target.value});
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          <AppBarTest />
          <FloatingActionButton
            style={styles.fab}
            backgroundColor={colors.blue_color}
            onTouchTap={this.handleOpen}
          >
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            open={this.state.open}
            onRequestClose={this.handleClose}
            title={strings.dialog_create_note_title}
          >
            <TextField
              hintText="Note"
              style={{ width: "48%", float: "left", height: 48 }}
              defaultValue={this.state.noteVal}
              onChange={this.handleChange}
            />

            <div
              style={{
                width: "4%",
                height: "48",
                backgroundColor: "red",
                float: "left",
                visibility: "hidden"
              }}
            />

            <FlatButton
              label={strings.create_note}
              style={{ width: "48%", height: 48, float: "left" }}
              onTouchTap={this.handleCreateNote}
            />
          </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

我低于错误

./src/App.js
Syntax error: D:/React JS/todo-app/src/App.js: Unexpected token (45:16)

  43 |   };
  44 | 
> 45 |   handleChange: function(event) {
     |                 ^
  46 |     this.setState({noteVal: event.target.value});
  47 |   }
  48 |

谁能帮我看看哪里出了问题？

Answer 1

Method definition。由于您在 class 主体声明中，因此您需要替换

 handleChange: function(event) {
    this.setState({noteVal: event.target.value});
  }

和

 handleChange(event) {
    this.setState({noteVal: event.target.value});
  }

Syntax error: Unexpected token (45:16) on handleChange in React JS

Syntax error: Unexpected token (45:16) on handleChange in React JS

reactjs

react-jsx