如何将实现Twilio短信发送的React类组件改写为使用Hooks的函数组件

改写后的Hooks函数组件完整代码 #

import React, { useState } from 'react';

const TextForm = () => {
  // 对应原类组件的state声明
  const [text, setText] = useState({
    recipient: '',
    textmessage: ''
  })

  const sendText = () => {
    // 直接调用已声明的状态变量，不需要通过this取值
    fetch(`http://localhost:4000/send-text?recipient=${text.recipient}&textmessage=${text.textmessage}`)
    .catch(err => console.error(err))
  }

  // 样式定义逻辑和原组件完全一致
  const spacer = {
    margin: 8
  }
  const textArea = {
    borderRadius: 4
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <div style={{ marginTop: 10 }} >
        <h2> Send Text Message </h2>
        <label> Your Phone Number </label>
        <br />
        <input value={text.recipient}
          onChange={e => setText({ ...text, recipient: e.target.value })} />
        <div style={spacer} />
        <label> Message </label>
        <br />
        <textarea rows={3} value={text.textmessage} style={textArea}
          onChange={e => setText({ ...text, textmessage: e.target.value })} />
        <div style={spacer} />
        <button onClick={sendText}> Send Text </button>
      </div>
    </div>
  );
}

export default TextForm;

核心改动说明 #

• 移除原Component导入，替换为导入useState Hook
• 用const [text, setText] = useState(初始值)语法替代类组件的state声明，功能完全一致
• 原类方法sendText改为普通函数，无需通过this访问状态，直接使用声明的text变量即可
• 表单输入的onChange事件中，用setText方法替代原this.setState，更新逻辑保持不变：先展开原有text对象，再覆盖修改的字段
• 样式定义、渲染逻辑和原有类组件完全一致，无功能变动

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