将基于类的 React 组件转换为函数式组件

Question

我是学习 React 的新手，我很难将类组件转换为功能组件以理解问题和分析。我想使用函数式方法来理解状态和生命周期方法在钩子概念中的工作原理。

我们如何才能实现这一目标？

我在课堂上的代码是

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
  

    flag: false,
      fields: [],
      Namefield: { value: '', error: '' },
      Emailfield: { value: '', error: '' },
      Mobilefield: { value: '', error: '' },
      tablerows: []
    };
    this.handleName = this.handleName.bind(this);
    this.handleMobile = this.handleMobile.bind(this);
    this.handleMail = this.handleMail.bind(this);
    this.addRow = this.addRow.bind(this);
  }
  handleName(e) {
    this.setState({
      Namefield: {
        value: e.target.value,
        error: false
      }
    })
  }
  handleMobile(e) {
    this.setState({
      Mobilefield: {
        value: e.target.value,
        error: false
      }
    })
  }
  handleMail(e) {
    this.setState({
      Emailfield: {
        value: e.target.value,
        error: false
      }
    })
  }

  addRow(e) {
    e.preventDefault();
    var newdata = { name: this.state.Namefield.value, mobile: this.state.Mobilefield.value, mail: this.state.Emailfield.value }
    // //take the existing state and concat the new data and set the state again
    this.setState({ tablerows: this.state.tablerows.concat(newdata), flag: true });

    const name1 = this.state.Namefield;
    const mob1 = this.state.Mobilefield;
    const mail1 = this.state.Emailfield;

    if (name1.value !== "") {
      const newName = [...this.state.fields, name1]
      this.setState({
        fields: newName,
        Namefield: {
          value: '',
          error: ''
        }
      })
    }

    if (mob1.value !== "") {
      const newMob = [...this.state.fields, mob1]
      this.setState({
        fields: newMob,
        Mobilefield: {
          value: '',
          error: ''
        }
      })
    }

    if (mail1.value !== "") {
      const newMail = [...this.state.fields, mail1]
      this.setState({
        fields: newMail,
        Emailfield: {
          value: '',
          error: ''
        }
      })
    }

  }

  deleteRow(passedID) {
    let tablerows = [...this.state.tablerows]
    tablerows.splice(passedID, 1)
    this.setState({
      tablerows: tablerows
    })
  }

  editRow = (index, type, values) => {

    const newState = this.state.tablerows.map((item, i) => {
      if (i === index) {
        return { ...item, [type]: values };
      }
      return item;
    });
    this.setState({
      tablerows: newState
    });

  }

  render() {

    return (
      <div className="App">
        <header className="App-header">Sample CRUD Operations</header>
        <form >
          <input
            type="text"
            placeholder="Name"
            value={this.state.Namefield.value}
            onChange={this.handleName} />       <br />
          <input
            type="number"
            placeholder="Mobile"
            maxLength="10"
            value={this.state.Mobilefield.value}
            onChange={this.handleMobile} />          <br />
          <input
            type="email"
            placeholder="Email"
            value={this.state.Emailfield.value}
            onChange={this.handleMail} />          <br />
          <div>
            <button onClick={this.addRow}>ADD</button>
          </div>
        </form>

        {this.state.tablerows.length > 0 ?
          <table style={{ "backgroundColor": "rgb(192, 217, 236)" }}>
            <thead style={{ "backgroundColor": "rgb(73, 116, 201)", "color": "white" }}>
              <tr style={{ "height": "50px" }}>
                <th>Name</th>
                <th>Mobile</th>
                <th>Email</th>
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
              {this.state.tablerows.map((row, index) =>
                <tr key={index}>
                  <td> <input
                    type="text"
                    value={row.name}
                    onChange={(e) => this.editRow(index, "name", e.target.value)} /></td>
                  <td> <input
                    type="number"
                    maxLength="10"
                    value={row.mobile}
                    onChange={(e) => this.editRow(index, "mobile", e.target.value)} /></td>
                  <td> <input
                    type="email"
                    value={row.mail}
                    onChange={(e) => this.editRow(index, "mail", e.target.value)} /></td>
                  <td><button className="deleteBtn" onClick={() => this.deleteRow(index)}>-</button></td>
                </tr>)}
            </tbody>
          </table> : ""}
      </div>
    );
  }}

Answer 1

您可以按照以下代码并继续其余的代码转换。

\n

import React from \'react\';\n\nfunction App() {\n\nconst [state, setState] = useState({\n    flag: false,\n    fields: [],\n    Namefield: { value: \'\', error: \'\' },\n    Emailfield: { value: \'\', error: \'\' },\n    Mobilefield: { value: \'\', error: \'\' },\n    tablerows: []\n  });\n\nconst addRow = (e) => {\n        e.preventDefault();\n        var newdata = { name: state.Namefield.value, mobile: state.Mobilefield.value, mail: state.Emailfield.value };\n        //take the existing state and concat the new data and set the state again\n        setState({ tablerows: state.tablerows.concat(newdata), flag: true });\n\n    const name1 = state.Namefield;\n    const mob1 = state.Mobilefield;\n    const mail1 = state.Emailfield;\n\n    if (name1.value !== "") {\n        const newName = [...state.fields, name1];\n        setState({\n            fields: newName,\n            Namefield: {\n                value: \'\',\n                error: \'\'\n            }\n        });\n    }\n\n    if (mob1.value !== "") {\n        const newMob = [...state.fields, mob1];\n        setState({\n            fields: newMob,\n            Mobilefield: {\n                value: \'\',\n                error: \'\'\n            }\n        });\n    }\n\n    if (mail1.value !== "") {\n        const newMail = [state.fields, mail1];\n        setState({\n            fields: newMail,\n            Emailfield: {\n                value: \'\',\n                error: \'\'\n            }\n        });\n    }\n}\n\n  const handleName = (e) => {\n      setState({\n      ...state,\n      Namefield: {\n        value: e.target.value,\n        error: false\n      }\n    })\n  };\n\n  return (\n    <div className="App">\n      ....\n    </div>\n  );\n};\n\nexport default App;\n

\n

步骤如下：

\n

\n

\n
1. 使用函数而不是类
\n
2. 删除构造函数
\n
3. 删除 render() 方法，保留 return
\n
4. 在所有方法前添加const
\n
5. 在整个组件中删除 this.state
\n
6. 删除整个组件中对 \xe2\x80\x98this\xe2\x80\x99 的所有引用
\n
7. 使用 useState() 设置初始状态
\n
8. 改为更改 this.setState() \xe2\x80\xa6，调用您在上一步中命名的函数来更新状态\xe2\x80\xa6
\n
9. 将 compentDidMount 替换为 useEffect
\n
10. 将 componentDidUpdate 替换为 useEffect
\n

\n

\n

更多详情

\n