如何在Material-UI Button的onSubmit事件中获取TextField输入值

首先说明：你原有代码中为TextField绑定onSubmit事件的写法是无效的，onSubmit是form表单的原生事件，单个输入组件不会触发该事件。你想要避免输入过程中实时更新状态触发提示渲染，只在点击提交按钮时才获取输入值并判断展示逻辑，有两种常用实现方式：

方案1：使用非受控组件（更推荐，符合需求） #

非受控组件不会在输入时同步更新React状态，只需要通过ref直接获取输入框DOM的value即可，完全避免输入过程中的状态更新，性能更优。

import React from 'react';
import { Component } from 'react';
import Button from '@mui/material/Button';
import { TextField } from '@mui/material';
class App extends Component 
{ 
    state = { 
        submittedValue: null, // 仅存储提交后的输入值，用来控制提示渲染
    } 
    // 创建ref绑定输入框底层DOM
    inputRef = React.createRef();

    handleSubmit = () => {
        // 点击提交按钮时才读取当前输入值
        const currentValue = this.inputRef.current.value;
        this.setState({
            submittedValue: currentValue
        })
    }
     
    render() { 
        return ( 
            <div>
            <TextField 
                inputRef={this.inputRef} // 将ref绑定到TextField的底层input元素
            />
            <Button onClick={this.handleSubmit}>Get Weather</Button>
            {this.state.submittedValue ? <p>value inputed </p>: <p>no input</p>}
            </div>
        ) 
    } 
} 

export default App;

方案2：拆分受控组件状态（适合后续需要实时处理输入的场景） #

如果你之后需要实现输入实时校验、内容格式化等逻辑，还是需要用受控组件的话，可以拆分两个状态：一个状态实时存储输入内容，不控制提示渲染；另一个状态存储提交后的结果，专门用来控制提示渲染。

import React from 'react';
import { Component } from 'react';
import Button from '@mui/material/Button';
import { TextField } from '@mui/material';
class App extends Component 
{ 
    state = { 
        inputValue: '', // 实时同步输入内容，不控制提示
        submittedValue: null, // 提交后的结果，控制提示渲染
    } 
 
    handleChange = (e) => this.setState({ 
        inputValue: e.target.value 
    })

    handleSubmit = () => {
        this.setState({
            submittedValue: this.state.inputValue
        })
    }
     
    render() { 
        return ( 
            <div>
            <TextField 
                value={this.state.inputValue} 
                onChange={this.handleChange}
            />
            <Button onClick={this.handleSubmit}>Get Weather</Button>
            {this.state.submittedValue ? <p>value inputed </p>: <p>no input</p>}
            </div>
        ) 
    } 
} 

export default App;

内容的提问来源于stack exchange，提问作者Yoqubxon Xamidoff