我正在集成 Twilio API，想知道如何使用鉤子將此類更改為函式。這個方法我以前學過，但是有點棘手。這是代碼。這段代碼的目的是讓我可以從我的應用程式發送一條短信。
import React, { Component } from 'react';
class TextForm extends Component {
state = {
text: {
recipient: '',
textmessage: ''
}
}
sendText = _ => {
const { text } = this.state;
//pass text message GET variables via query string
fetch(`http://localhost:4000/send-text?recipient=${text.recipient}&textmessage=${text.textmessage}`)
.catch(err => console.error(err))
}
render() {
const { text } = this.state;
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 => this.setState({ text: { ...text, recipient: e.target.value } })} />
<div style={spacer} />
<label> Message </label>
<br />
<textarea rows={3} value={text.textmessage} style={textArea}
onChange={e => this.setState({ text: { ...text, textmessage: e.target.value } })} />
<div style={spacer} />
<button onClick={this.sendText}> Send Text </button>
</div>
</div>
);
}
}
export default TextForm;
uj5u.com熱心網友回復：
大多數零件都在那里 - 你只需要組織它們。您不再需要依賴this- 您只需在組件內部添加函式來處理上傳和狀態更改。
（注意：我確實在您的 JSX 中添加了一些欄位集，因為我認為它們看起來不錯。）
const { useState } = React;
function TextForm() {
// Set up the state with an empty object
const [text, setText] = useState({});
// I'm only logging the state here as I don't have
// API access for this working demo
function sendText() {
console.log(text);
// const params = `${text.phonenumber}&textmessage=${text.message}`;
// fetch(`http://localhost:4000/send-text?${params}`)
// .catch(err => console.error(err))
}
// Grab the name and value from the input
// that has been clicked, and use that information
// to update the state
function handleChange(e) {
const { name, value } = e.target;
setText({ ...text, [name]: value });
}
// Make sure that for each input you include
// a name attribute
return (
<div>
<fieldset>
<legend>Phone Number</legend>
<input
name="phonenumber"
type="tel"
value={text.phonenumber}
onChange={handleChange}
/>
</fieldset>
<fieldset>
<legend>Message</legend>
<textarea
name="message"
rows={3}
value={text.message}
onChange={handleChange}
/>
</fieldset>
<br />
<button onClick={sendText}>Send Text</button>
</div>
);
}
ReactDOM.render(
<TextForm />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
設定功能組件
const TextForm () => {
const [text, setText] = React.useState({
{
recipient: '',
textmessage: ''
}
});
const sendText = ()=> {
//pass text message GET variables via query string
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: { ...text, recipient: e.target.value } })} />
<div style={spacer} />
<label> Message </label>
<br />
<textarea rows={3} value={text.textmessage} style={textArea}
onChange={e => setText({ text: { ...text, textmessage: e.target.value } })} />
<div style={spacer} />
<button onClick={sendText}> Send Text </button>
</div>
</div>
);
}
export default TextForm
uj5u.com熱心網友回復：
首先是功能組件，如果你想創建state你需要匯入useStatefrom react，然后先轉換你的狀態：
由此：
state = {
text: {
recipient: '',
textmessage: ''
}
}
到此功能組件 useState
const [text, setText] = useState({
recepient: "",
textMessage: ""
});
將您的方法轉換為函式：
sendText = _ => {
const { text } = this.state;
//pass text message GET variables via query string
fetch(`http://localhost:4000/send-text?recipient=${text.recipient}&textmessage=${text.textmessage}`)
.catch(err => console.error(err))
}
render() {
const { text } = this.state;
const spacer = {
margin: 8
}
const textArea = {
borderRadius: 4
}
到這個功能：
const sendText = (_) => {
//pass text message GET variables via query string
fetch(
`http://localhost:4000/send-text?recipient=${text.recepient}&textmessage=${text.textMessage}`
).catch((err) => console.error(err));
};
const spacer = {
margin: 8
};
const textArea = {
borderRadius: 4
};
然后最后轉換您的回傳完整代碼如下：
import React, { useState } from "react";
const TextForm = () => {
const [text, setText] = useState({
recepient: "",
textMessage: ""
});
const sendText = (_) => {
//pass text message GET variables via query string
fetch(
`http://localhost:4000/send-text?recipient=${text.recepient}&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.recepient}
onChange={(e) =>
setText((prevText) => ({
...prevText,
recepient: e.target.value
}))
}
/>
<div style={spacer} />
<label> Message </label>
<br />
<textarea
rows={3}
value={text.textMessage}
style={textArea}
onChange={(e) =>
setText((prevText) => ({
...prevText,
textMessage: e.target.value
}))
}
/>
<div style={spacer} />
<button onClick={sendText}> Send Text </button>
</div>
</div>
);
};
export default TextForm;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/354893.html
標籤：javascript 反应 班级
上一篇：沒有可用的錯誤訊息，結果代碼：DB_SEC_E_AUTH_FAILED(0x80040E4D)
下一篇：如何轉換為date-fns？