我只是无法弄清楚如何做到这一点。
此 function 用于拆分输入 ID 的字符串。
function func() {
// Original string
let str = urlInput.value
// Splitting up the string
let array = str.split(".com/");
let joined = array[0]+".com/embed/"+array[1];
document.write(joined);
console.log("function happened")
}我试图通过 onChange 传递它，然后将其设置为状态，但 function 没有通过 onChange？
{
currentAccount ? (<textarea
placeholder={spotifyLink}
type="url"
id="urlInput"
onChange={e => {{func}; setMessageValue(e.target.value)}}/>) : null
}我究竟做错了什么？如何在 function 拆分用户输入字符串 onChange 后传递 function 和 setState？
回答1
您可以使用受控组件。使用这种方法，输入 value 由状态控制。它提倡单一事实来源，您可以在https://reactjs.org/docs/forms.html#controlled-components阅读更多内容。
代码 -
function TextAreaComponent() {
const [messageValue, setMessageValue] = useState('');
const splitString = (str) => {
// Splitting up the string
let array = str.split(".com/");
let joined = array[0]+".com/embed/"+array[1];
return joined;
}
const handleOnChange = (event) => {
const { value } = event.target;
const splittedString = splitString(value);
setMessageValue(splittedString);
}
return (
<textarea
// placeholder={spotifyLink}
// id="urlInput"
type="url"
value={messageValue}
onChange={handleOnChange}
/>
);
}