小编Mic*_*kis的帖子

到目前为止我有一个看起来像这样的组件：

import React from 'react';

// Import images
import logo from '../images/logo-small.png';

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

        this.state = {
            email: '',
            password: '',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

我将handleChange(e)在我的应用程序上的多个文件的多个组件中重复使用相同的方法。有没有办法可以分离出这个方法，而不必每次都重写它？

我是否可以输入handleChange(e)文件名utils.js并在每次需要使用该文件时导入该文件？如果是这样，我如何确保其this.setState正常工作？

我对如何解决这个问题有一些粗略的想法（例如上面的想法），但我想采取最好的方法。谢谢！

这是我.tsx添加企业的文件。

当我运行该程序时，我可以输入输入内容，但是当我点击提交按钮时什么也没有发生。

我的应用程序中有一个页面，其中有一个用于添加新企业的按钮。单击“添加企业”按钮后，将显示一个表单，其中包含名称输入字段和提交按钮。当用户填写表格后点击提交时，企业名称应该出现在企业表中。

export default class AddEnterprise extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const enterprise = {
      name: this.state.name
    };

    axios.post(`${process.env.PUBLIC_URL}/api/enterprises`, { enterprise })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
        <div>
    <form onSubmit={this.handleSubmit}>
      <label>
        Enterprise Name:
        <input type="text" name="name" onChange={this.handleChange} />
      </label>
      <button type="submit">Add</button>
    </form>
  </div>
    )
  }
}

在开发者控制台中，我收到以下错误：

无法加载资源：服务器响应状态为 400 () createError.js:16 …

我正在尝试将视频背景放在我的网站上，但是当我将视频标签放入我的反应脚本中时，它开始在 Firefox 上无休止地加载，当我在 chrome 上尝试时，它会在 0 秒处显示我尝试过的视频，但.mp4格式.mov没有成功。

import React, { Component } from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";

class App extends Component {
  render() {
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src="hd1992.mov" type="video/mov"></source>
        </video>
      </div>
    );
  }
}
export default App;

组件允许您设置是否需要该字段，但我想更改*符号* mandatory field。

有什么办法可以做到吗？