我已经阅读了大量关于这个主题的问题，并且也研究了React的文档，但我仍然对此一无所知。我无法使输入字段在点击或更改时发出任何内容（事件）。
我的代码如下，除了使用materialzecss外，我还使用基本的HTML/JSX，没有其他javascript。
我简单地无法在onChange或onClick上更新输入以在选中/未选中之间切换。有人能告诉我我在哪里错了吗？
我的代码如下，除了使用materialzecss外，我还使用基本的HTML/JSX，没有其他javascript。
我简单地无法在onChange或onClick上更新输入以在选中/未选中之间切换。有人能告诉我我在哪里错了吗？
import React, { Component } from 'react'
import Alert from '../components/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'
class Create extends Component {
constructor(){
super()
this.state = {
redirect:false,
alert:{
show: false
},
checked:true
}
}
handleChange(event) {
this.setState({
recipe : {[event.target.name]: event.target.value}
})
console.log(this.state);
}
handleSubmit(event) {
}
render() {
const { redirect } = this.state;
const showAlert = this.state.alert.show;
if (redirect) {
return <Redirect to='/'/>;
} else if (showAlert) {
console.log("alert");
}
return (
<div className="row">
{showAlert ? <Alert /> : ''}
<div className="container">
<div className="row">
<div className="col s10 offset-s1 z-depth-1" id="loginForm">
<h5 className="red darken-4" id="title">Create New Recipe</h5>
<form >
<div className="input-field" id="username" >
<input type="text" className="validate" name="name"
onChange={this.handleChange.bind(this)} />
<label htmlFor="name">Name</label>
</div>
<div className="input-field" id="password">
<input type="text" className="validate" name="intro"
onChange={this.handleChange.bind(this)} />
<label htmlFor="password">Intro</label>
</div>
<div className="input-field" id="password">
<textarea id="textarea1" className="materialize-textarea" name="body"
onChange={this.handleChange.bind(this)}>
</textarea>
<label htmlFor="textarea1">Recipe</label>
</div>
<div className="row">
<div className="input-field col s12 m5" id="password">
<Serves function={this.handleChange.bind(this)}/>
<label>Serves</label>
</div>
<div className="input-field col s12 m5" id="test">
<select name="cuisine" defaultValue="2" onChange={(e)=>{console.log(e)}}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Cuisine</label>
</div>
</div>
<div className="input-field" id="password">
<input type="checkbox" className="filled-in" id="filled-in-box"/>
<label htmlFor="filled-in-box">Public?</label>
</div>
<button type="submit" className="waves-effect waves-light btn red darken-4" id="loginbtn">Login</button>
<a href="/app/dashboard" className="waves-effect waves-light btn amber darken-1" id="loginbtn">Back</a>
</form>
</div>
</div>
</div>
</div>
)
}
}
export default Create;
const Serves = (props) => {
return(
<select onChange={props.function} name="serves" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="9">10</option>
</select>
)
}