html - 将 function 传递给输入 onChange,然后将其设置为状态 reactjs?

我只是无法弄清楚如何做到这一点。

此 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}
    />
  );
}

相似文章

javascript - 输出reactjs时看不到函数

在没有标题的主页上,此功能有效。我想把它放在一个单独的页面上,它不起作用。我查看了示例,一切都收敛了,不会显示在单独的页面上。Аromaddpeople添加,标题(例如<\h1>text<\h1>或其...

最新文章