如何在React 16.5.2中使用Material UI Select且不依赖useState？

因为React 16.5.2不支持Hooks，你可以用类组件的实例state来管理Select组件的选中值，完全替代useState的作用。以下是针对你代码的修改方案：

核心修改点 #

• 在类的state中添加disposition和callnotes字段，用于存储选中值和输入框内容
• 实现对应的事件处理函数，更新组件state
• 替换原生<select>为Material UI的<Select>组件（和你导入的FormControl等组件匹配）
• 修正React元素的class属性为className（React中需用className替代原生class）

修改后的完整代码 #

import React from "react";
import { withTaskContext } from "@twilio/flex-ui";
import { selectCurrentEntity } from "../helpers/channelIntegrationFramework";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select"; // 导入Material UI的Select组件

class VoiceCallComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      functionsBaseUrl: this.props.functionsBaseUrl,
      settingsBaseUrl: this.props.settingsBaseUrl,
      disposition: "", // 添加disposition状态
      callnotes: "" // 添加callnotes状态，对应TextField的值
    };

    this.init();
  }

  init = () => {
    console.log(
      `Connector: -- VoiceCallComponent -- functionsBaseUrl: ${this.state.functionsBaseUrl} -- settingsBaseUrl: ${this.state.settingsBaseUrl}`
    );
  };

  // 处理TextField的输入变化
  handleChange = (e) => {
    this.setState({ callnotes: e.target.value });
  };

  // 处理Select的选中变化
  handleSelectChange = (e) => {
    this.setState({ disposition: e.target.value });
    console.log("disposition :- ", { disposition: e.target.value });
  };

  render() {
    console.log("Connector: ====== render ========");
    const { task } = this.props;
    return (
      <div className="Twilio-TaskInfoPanel-default css-18ljn0d"> {/* 替换class为className */}
        <span className="Twilio" /> {/* 替换class为className */}
        <h1>Notes:</h1>
        <ul>
          <TextField
            style={{
              textAlign: "left",
              margin: "0px",
              width: "250px",
              height: "55px",
            }}
            hintText="Message Field"
            floatingLabelText="Note"
            multiline
            rows={2}
            maxRows={5}
            value={this.state.callnotes}
            onChange={this.handleChange}
          />
          <p style={{ marginTop: "5px" }}></p>
          <label style={{ fontWeight: "700" }}>Disposition*: </label>

          <FormControl fullWidth>
            <InputLabel id="disposition-label">Disposition*:</InputLabel>
            {/* 使用Material UI的Select组件，绑定state和事件 */}
            <Select
              labelId="disposition-label"
              id="disposition-select-label"
              value={this.state.disposition}
              onChange={this.handleSelectChange}
              fullWidth
            >
              <MenuItem value="11">Contacted</MenuItem>
              <MenuItem value="22">Bad Number</MenuItem>
              <MenuItem value="33">Hung up on Call</MenuItem>
            </Select>
          </FormControl>
        </ul> {/* 补充缺失的ul闭合标签 */}
      </div>
    );
  }
}

export default withTaskContext(VoiceCallComponent);

关键说明 #

1. 类组件的state是存储在实例中的对象，通过this.setState()方法更新状态，触发组件重新渲染，这和useState的作用完全一致。
2. 用箭头函数定义事件处理函数（如handleChange），可以自动绑定组件实例的this，避免手动绑定的麻烦。
3. 替换原生select为Material UI的Select组件，确保和FormControl、InputLabel等组件的样式和行为兼容，避免出现样式错乱或交互问题。

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