React项目中@material-ui/core的Button和TextField无法交互如何解决

问题原因及对应解决方案 #

1. 组件事件与状态绑定缺失 #

你当前的代码未给交互组件绑定必要的事件属性：

• TextField如果作为受控组件使用，必须配套绑定value和onChange属性，缺失状态更新逻辑时输入框会默认进入不可编辑状态；如果要使用非受控模式，需要添加defaultValue属性
• Button未绑定onClick事件，点击自然没有响应逻辑

2. 样式或上层组件拦截交互 #

检查父容器/全局样式是否设置了pointer-events: none属性，该属性会禁用所有鼠标交互；同时确认上层组件没有拦截事件冒泡、给子组件全局添加了disabled属性。

3. 版本兼容问题 #

检查当前使用的Material UI版本与React版本是否匹配，Material UI v4及更早版本和React 18+可能存在兼容异常，导致组件交互失效。

修复后的代码示例（受控组件模式） #

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

class Descarcare extends React.Component {
  constructor(props) {
    super(props);
    // 新增state存储输入框值
    this.state = {
      idValue: ''
    };
    // 绑定事件this指向
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // 输入框内容更新逻辑
  handleInputChange(e) {
    this.setState({
      idValue: e.target.value
    });
  }

  // 按钮点击提交逻辑
  handleSubmit() {
    // 此处填写你的提交业务逻辑
    console.log('提交的ID为：', this.state.idValue);
  }

  render() {
    return(
      <div>
        <h1>Descarcare</h1>
        <TextField 
          id="standard-required" 
          label="ID" 
          value={this.state.idValue}
          onChange={this.handleInputChange}
          InputProps={{
            readOnly: false,
          }}
        />
        <Button 
          variant="contained" 
          color="primary"
          onClick={this.handleSubmit}
        >
          Trimite
        </Button>
      </div>
    );
  }
}

export default Descarcare;

非受控组件模式（无需状态绑定，适合简单场景） #

如果不需要实时监听输入内容，也可以直接使用非受控模式，无需绑定state：

<TextField 
  id="standard-required" 
  label="ID" 
  defaultValue=""
  InputProps={{
    readOnly: false,
  }}
/>

如果修改后仍然无法交互，可通过浏览器开发者工具检查元素属性与样式，确认是否有全局样式或上层组件拦截了交互事件。

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