MUI 图标按钮在单击时显示边框答案

【问题标题】：MUI Icon button show border when clickedMUI 图标按钮在单击时显示边框
【发布时间】：2021-08-04 05:44:06
【问题描述】：

我为我的网站使用了一个图标按钮，但是当它被点击时，它会显示一个边框并且动画也消失了。另外，我想知道如何为我的 + / - 按钮分配功能以增加和减少文本输入中的值。以下是我的完整代码。我得到了 NaN

代码：

export class BookingSummary extends Component {

    constructor(props) {
        super(props);
        this.state = {
          seatPrice: [],
          dataLoaded: false,
          priceList :[],
        };
      }

    state = { value: 0 };

      onPlusClick = () => {
        this.setState({ ...this.state, value: this.state.value + 1 });
      };
      onMinusClick = () => {
        this.setState({ ...this.state, value: this.state.value - 1 });
      };

        render () {
                return (
                                        <IconButton
                                            onClick={this.onMinusClick}
                                            aria-label="minus"
                                            style={{ marginTop: 15 }}
                                        >
                                        <RemoveCircleIcon fontSize="inherit" />
                                        </IconButton>
                                        <TextField
                                            value={this.state.value}
                                            id="outlined-adornment-small"
                                            // defaultValue="50"
                                            variant="outlined"
                                            size="small"
                                            style={{ width: 48, height: 35 }}
                                            labelWidth={0}
                                        />
                                        <IconButton
                                            onClick={this.onPlusClick}
                                            aria-label="plus"
                                            style={{ marginTop: 15 }}
                                        >
                                            <AddCircleIcon fontSize="inherit" />
                                        </IconButton>

【问题讨论】：

您能分享一下您在沙盒或 stackbiltz 中的代码示例吗？
可交互的 UI 元素通常会有一个焦点环作为可访问性的一部分，以便用户知道什么是焦点以及他们当前正在与之交互。如果您需要我们更深入地研究任何问题，那么您需要提供矿石上下文并实际说明问题是什么，您已经完成的任何调试，以及预期与实际结果/观察结果。我运行可以重现任何问题的代码沙盒是有益的。
@MajidMohammadi codesandbox.io/s/priceless-mountain-v9fdm?file=/src/App.js 请检查沙箱。单击加号和减号图标时是否可以更改输入字段中的数字？
@RyanFonseka 您想在类组件中呈现示例吗？功能组件中的useState钩子与分类组件中的setState相同。
@RyanFonseka 你想用它作为分类组件吗？

标签： reactjs material-ui

【解决方案1】：

您可以在分类组件中使用预定义的setState 来实现您的目标。您还需要将onClick 用于IconButtons。当用户单击按钮时，您应该更改计数器的值。这是您要实现的分类组件：

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import "./styles.css";

export class MyComponent extends React.Component {
  state = {
    value: 0
  };
  onPlusClick = () => {
    this.setState({ ...this.state, value: this.state.value + 1 });
  };
  onMinusClick = () => {
    this.setState({ ...this.state, value: this.state.value - 1 });
  };

  render() {
    return (
      <div className="App">
        <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
          <div className="row">
            <div className="col-md-12">
              <div className="st_dtts_bs_wrapper float_left">
                <div className="st_dtts_bs_heading float_left">
                  <p>Booking summary</p>
                </div>
                <div className="st_dtts_sb_ul float_left">
                  <ul>
                    <li>
                      movieData.seats
                      <br />( 5 Tickets ) ODC <span>Rs .50</span>
                    </li>
                    <li>
                      Child Tickets
                      <br />( 2 Tickets ) ODC <span>Rs .5 </span>
                      <br />
                      <br />
                      <IconButton
                        onClick={this.onMinusClick}
                        aria-label="minus"
                        style={{ marginTop: 15 }}
                      >
                        <RemoveCircleIcon fontSize="inherit" />
                      </IconButton>
                      <TextField
                        value={this.state.value}
                        id="outlined-adornment-small"
                        defaultValue="50"
                        variant="outlined"
                        size="small"
                        style={{ width: 48, height: 35 }}
                        labelWidth={0}
                      />
                      <IconButton
                        onClick={this.onPlusClick}
                        aria-label="plus"
                        style={{ marginTop: 15 }}
                      >
                        <AddCircleIcon fontSize="inherit" />
                      </IconButton>
                    </li>
                    <li>
                      Handling fees <span>Rs. 25</span>
                    </li>
                  </ul>
                </div>
                <div className="st_dtts_sb_h2 float_left">
                  <h3>
                    Sub total <span>Rs. 55</span>
                  </h3>
                  <h4>
                    Current State is <span>Colombo</span>
                  </h4>
                  <h5>
                    Payable Amount{" "}
                    <span style={{ color: "#ff4444" }}>Rs. 555</span>
                  </h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default function App() {
  return <MyComponent />;
}

【讨论】：

当我添加它时，它会在 TextField 中给我一个名为“Nan”的值
@RyanFonseka 您是否为状态定义了初始值？ state = { value: 0 };
您是否将value={this.state.value} 添加到TextField？
@RyanFonseka 请分享您的代码以进行调试。您似乎做了一些导致意外事件的事情。
谢谢。这是错误。傻我。不便之处敬请谅解。非常感谢您的帮助。祝你好运！！ ????