React表单onSubmit事件失效求助：附AddMovie组件代码

核心问题 #

提交按钮未设置type="submit"。Material-UI的Button组件默认type为button，点击这类按钮不会触发表单的onSubmit事件，必须显式声明type="submit"才能让按钮成为表单提交触发器。

额外问题修复 #

除核心问题外，代码还有几处小问题需要修正：

• Director和Actor输入框绑定了错误的onChange函数，导致输入值无法同步到组件state
• 部分state初始化时带了多余空格，会让输入框初始存在空白内容
• 提交后直接console.log(movieList)无法获取最新值，因为setMovieList是异步操作，如需查看最新数据，可直接打印构造好的movieObject

修复后的完整代码 #

const initialValues={
  id:"",
  title:"",
  director:"",
  actor:"",
  genre:""
}
const options = [
{
  label: "Romance",
  value: "romance",
},
{
  label: "Drama",
  value: "drama",
},
{
  label: "Thriller",
  value: "thriller",
},
{
  label: "Crime",
  value: "crime",
},
{
  label: "Comedy",
  value: "comedy",
},
{
  label: "Western",
  value: "western",
},
];
const AddMovie = () => {
const [title,setTitle]=useState("")
const [director,setDirector]=useState("")
const [actor,setActor]=useState("")
const [genre,setGenre]=useState('')
const [movieList,setMovieList]=useState(initialValues);

const handleGenre=(event)=>{
  setGenre(event.target.value)
}

const onTitleChange=(e)=>{
  setTitle(e.target.value)
}

const onDirectorChange=(e)=>{
  setDirector(e.target.value)
}

const onActorChange=(e)=>{
  setActor(e.target.value)
}

const onSubmit=(e)=>{
    e.preventDefault();
    console.log("wete")
    const movieObject={
      title:title,
      director:director,
      actor:actor,
      genre:genre
    }
    setMovieList(movieObject)
    // 直接打印movieObject查看提交数据
    console.log(movieObject)
    axios.post('http://localhost:8000/api/add', movieObject)
          .then((res) => {
              console.log(res.data)
          }).catch((error) => {
              console.log(error)
          });
    setMovieList({ title: '', director: '' ,actor:'',genre:''})
}

return (
   <Box
    component="form"
    sx={{
      '& .MuiTextField-root': { m: 1, width: '25ch' },
    }}
     onSubmit={onSubmit}
    noValidate
    autoComplete="off"
    className="container"
  >
    <div>
    <Typography variant='h3' className="heading">Add Movie</Typography>
      <div className="input-container">
      <TextField
        required
        id="outlined-required"
        label="Movie"
        value={title}
        placeholder="Movie name"
        className="input"
        onChange={onTitleChange}
      />
      
      <TextField
        required
        id="outlined-required"
        label="Director"
        placeholder="Director"
        className="input"
        onChange={onDirectorChange}
      />
      <TextField
        required
        className="input"
        id="outlined-required"
        label="Actor"
        placeholder="Actor"
        onChange={onActorChange}
        
      />
       <div className="input-select">
  <FormControl sx={{ m: 1, width: 300 }}>    
  <InputLabel id="demo-simple-select-label">Genre</InputLabel>
<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={genre}
  label="Genre" 
  onChange={handleGenre}
>
{options.map((option,index)=>(
   <MenuItem key={index}value={option.value}>{option.label}</MenuItem>
))}
</Select>
</FormControl>
</div>
        
      </div>
    </div>
    {/* 新增type="submit" */}
    <Button variant="contained" color="primary" type="submit">Add</Button>
    
  </Box>
)
}

export default AddMovie

内容的提问来源于stack exchange，提问作者aysha faisal