Javascript onSubmit不'；我不想设置状态

我正在尝试使用MaterialUI构建一个表单。My TextField需要从用户处收集信息，在提交时，My handleSubmit（）函数应将状态设置为用户输入的状态。目前情况并非如此。我试着用“onChange”代替“onSubmit”。这种方法允许我保存信息，但是UI开始出现错误，允许用户只在文本字段中输入一个字母。我很困惑。我非常感谢你的建议。请参阅下面我的代码：

import React, { Component } from 'react';

import { withStyles, makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import './Navbar.css';
import * as AiIcons from "react-icons/ai";


class StackO extends Component {

    constructor() {
        super()
        this.state = {
          state_foo: null,
        }
        this.handleSubmit = this.handleSubmit.bind(this)
      }

      handleSubmit = e => {
        e.preventDefault();

        this.setState({ 
            state_foo: e.target.value,
         });

      }

      showstate = event => {
        event.preventDefault();
        console.log(this.state.state_foo)
      }

      render() {

        const CssTextField = withStyles({
            root: {
                '& label.Mui-focused': {
                color: 'green',
                },
                '& .MuiInput-underline:hover:before': {
                borderBottomColor: 'white',
                },
                '& .MuiInput-underline:before': {
                borderBottomColor: 'white',
                },
                '& .MuiInput-underline:after': {
                borderBottomColor: 'green',
                },
            },
            })(TextField);
        
          
        const useStyles = makeStyles((theme) => ({
            margin: {
                margin: theme.spacing(4),
            },
        }));


        return (
            <>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <div className={useStyles.margin}>
                            <Grid container spacing={1} alignItems="flex-end">
                                <Grid item>
                                    <AiIcons.AiOutlineForm />
                                </Grid>
                                <Grid item>
                                    <CssTextField className={useStyles.root}
                                    value={this.state.state_foo}
                                    style ={{width: '125%'}}
                                    inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
                                    id="input-with-icon-grid" label="Proposed term"
                                    InputLabelProps={{style: { color: 'white'}}}
                                    />
                                </Grid>
                            </Grid>
                        </div>
                    </div>
                    <button type='submit' onClick={this.showstate}>Submit</button>
                </form>
            </>

        )
      }

}

export default StackO

import React，{Component}来自'React'；
从“@material ui/core/styles”导入{withStyles，makeStyles}”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Grid”导入网格；
导入“/Navbar.css”；
从“反应图标/ai”导入*作为ai图标；
类StackO扩展组件{
构造函数（）{
超级（）
此.state={
state_foo:null，
}
this.handleSubmit=this.handleSubmit.bind（this）
}
handleSubmit=e=>{
e、 预防默认值（）；
这个.setState（{
声明：e.target.value，
});
}
showstate=事件=>{
event.preventDefault（）；
console.log（this.state.state\u foo）
}
render（）{
const CssTextField=带样式({
根目录：{
“&label.Mui聚焦”：{
颜色：“绿色”，
},
“&.MuiInput下划线：悬停：在”：{
边框底部颜色：“白色”，
},
“&.MuiInput下划线：在”：{
边框底部颜色：“白色”，
},
'&.MuiInput下划线：在''{
边框底部颜色：“绿色”，
},
},
})（文本字段）；
const useStyles=makeStyles（（主题）=>({
保证金：{
边距：主题。间距（4），
},
}));
返回(
提交
)
}
}
导出默认堆栈

您可能会在控制台中看到以下警告：

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

您当前正在告诉您的

输入

从

this.state.state\u foo

读取其值，但您从未更新该状态。要解决此问题，请将

onChange

处理程序传递给您的输入：

...
handleChange(e) {
  this.setState({ state_foo: e.target.value });
}

...

render() {
  ...
  <input value={this.state.state_foo} onChange={this.handleChange} />
  ...
}

。。。
手变（e）{
this.setState（{state_foo:e.target.value}）；
}
...
render（）{
...
...
}

另一种方法是让输入不受控制，只从提交事件中读取状态，但“反应方式”是自己管理状态

您可能一次只能向输入中添加一个字符，因为您正在阻止默认行为

---

旁注：我会厌倦将

with styles

和

makeStyles

代码放在类的

呈现方法中；考虑把这个从你的渲染中移去，以免引起不必要的UI错误。
谢谢你的快速回复：）引起问题的是两者的结合。所以，当我添加“onChange”时，我的UI再次出现错误，允许用户一次只输入一个字符。但在将“withStyles”和“makeStyles”移出渲染后，情况发生了变化。