如何更改类组件ReactJS中的状态值

我有以下代码：

    class ContactUs extends React.Component {
      constructor() {
        super();

        this.state = {
          attach: "Attach a file (Max. 5 MB).",
        };
    }
  render() {
        function a(event) {
      if (event.target.files && event.target.files[0]) {
           const maxAllowedSize = 5 * 1024 * 1024;
        if (event.target.files[0].size > maxAllowedSize) {
          // Here you can ask your users to load correct file
          this.setState({ attach: "so big file!!!" });
          event.target.value = "";
        }
      }
    }
    return ( <div>
                     <input
                      type="file"
                      accept="image/*,.xls,.xlsx,.docx,.pdf"
                      id={Styles["file"]}
                      onChange={a}
                    />
                  </div>
                  <label className={Styles["attached-file-text"]}>
                    Attach a file (Max. 5 MB).
                    {this.attach}
                  </label>
     </div>
    export default ContactUs;

我想看到的是，当我选择>5MB文件时，它应该显示文件太大了！！！而不是附加一个最大为5 MB的文件。 我尝试以下代码：this.setState{attach:so big file！！！}，但是它不工作，请帮助

1。为此，您需要将函数移到渲染函数之外&类内部。 参考：

2.无论何时调用函数，都需要像这样调用函数 此文件名为.changeFileHandler

请参阅本活动：

3.如果您想在普通函数中使用此函数，则需要将其绑定到构造函数中的函数或在调用函数时使用

有关如何绑定到函数的信息，请参阅：

4.如果您不想附加绑定功能，请使用ES6箭头功能

5.始终使用this.state.attach调用您所在的州，而不是this.attach

6.始终给出与您所做工作相关的函数名或变量名

---

这里有几个问题：

您需要将函数移到渲染方法之外 您需要将方法绑定到构造函数中的this，以确保可以在方法中调用this.setState 您需要在渲染方法中引用this.state.attach，而不是this.attach

     class ContactUs extends React.Component {
          constructor() {
            super();

            this.state = {
              attach: "Attach a file (Max. 5 MB).",
            };
        }
        
            changeFileHandler = event => {
          if (event.target.files && event.target.files[0]) {
               const maxAllowedSize = 5 * 1024 * 1024;
            if (event.target.files[0].size > maxAllowedSize) {
              // Here you can ask your users to load correct file
              this.setState({ attach: "so big file!!!" });
              event.target.value = "";
            }
          }
        }
        
      render() {
        
        return ( <div>
                         <input
                          type="file"
                          accept="image/*,.xls,.xlsx,.docx,.pdf"
                          id={Styles["file"]}
                          onChange={this.changeFileHandler}
                        />
                      </div>
                      <label className={Styles["attached-file-text"]}>
                        Attach a file (Max. 5 MB).
                        {this.state.attach}
                      </label>
         </div>
        export default ContactUs;

class ContactUs extends React.Component {
  constructor() {
    super();

    this.state = {
      attach: "Attach a file (Max. 5 MB).",
    };

    // 2
    this.handleChange = this.handleChange.bind(this);
  }

  // 1
  handleChange(event) {
    if (event.target.files && event.target.files[0]) {
      const maxAllowedSize = 5 * 1024 * 1024;;
      if (event.target.files[0].size > maxAllowedSize) {
        this.setState({ attach: "so big file!!!" });
        event.target.value = "";
      }
    }
  }

  render() {
    return (
      <div>
        <input
          type="file"
          accept="image/*,.xls,.xlsx,.docx,.pdf"
          onChange={this.handleChange}
        />
        <label>
          {this.state.attach} // 3
        </label>
      </div>
    );
  }
}