javascript - React 中的文本输入未启用按钮？

问题描述

在 Instagram MERN 项目中，我为每个用户创建了评论框。发布按钮在启动时被禁用，并在输入文本时启用，但是，即使在输入文本后该按钮也被禁用，这会阻止它提交。以下是代码参考

主页.js

const Home = () => {
        
        const [newText, setNewText] = useState([])

        const onChange = e => {
              const { value } = e.target;
              setNewText(value);
         };
                    
        const makeComment = (text,postId)=>{
        fetch('/comment',{
            method:"put",
            headers:{
                "Content-Type":"application/json",
                "Authorization":"Bearer "+localStorage.getItem("jwt")
            },
            body:JSON.stringify({
                postId,
                text
            })
        }).then(res=>res.json())
        .then(result=>{
            console.log(result)
            const newData = data.map(item=>{
              if(item._id==result._id){
                  return {...item,comments: result.comments}
              }else{
                  return item
              }
           })
          setData(newData)
        }).catch(err=>{
            console.log(err)
        })
  }

return (
       {
                 return (
          <form onSubmit={(e) => {e.preventDefault(); makeComment(e.target[0].value, item._id)}}>
            <input type="text" value={newText[item._id]} onChange={onChange} placeholder="add a comment/>
            <button type="submit" disabled={!newText[item._id]}>Post</button>
          </form>
                        )
       }
}

在此处输入图像描述

见上图。在这里您可以看到该按钮未启用并且文本被阻止提交。什么是更好的解决方案？

标签： javascriptreactjs

这是有效的解决方案：https ://codesandbox.io/s/quiet-thunder-bgol9

该按钮被禁用，因为 newText[item._id] 为 false 或未定义。在您的 onChange 处理程序中，您需要将 newText[item._id] 设置为 true，或者更确切地说具有输入的值。

const item = { _id: 1, name: "name" };

const [newText, setNewText] = React.useState([]);
const [counter, setCounter] = React.useState(0);

const onChange = (e, id) => {
    const value = e.target.value;
    const changedText = newText;
    changedText[item._id] = value;
    setNewText(changedText);

    setCounter(counter + 1);
};

输入是：

   <input
      type="text"
      value={newText[item._id] ? newText[item._id] : ""}
      onChange={(e) => {
        onChange(e, item._id);
      }}
      placeholder="add a comment"
    />

这段代码的一些注释：

您的 JSX 中有错字，缺少“。此外，您没有提供 item 变量，因此我将其添加为常量。您需要将它放在您的组件中（可能来自道具）。
由于您有一个受控输入，但最初 newText 是一个空数组，您应该检查 newText[item._id] 是否为空。如果有值，则显示该值，如果为空，则显示空字符串。
您的 onChange 函数应该获取 item._id 作为参数，因此它知道正在编辑哪个项目。
当您将输入存储在一个数组中时，作为一个数组项，更新这个数组不会触发组件的重新渲染，因为在 ShouldComponentUpdate 中，React 只对其状态变量进行浅比较。为此，您需要通过 setStating 一些其他变量来“破解”它，这将触发组件的重新渲染，从而使用当前值更新您的输入。

一般来说，你在这里做的不是一个好的架构。您不应该将输入的值存储在数组中，因为您没有很多输入。仅将其存储在普通字符串变量中。然后，当您提交它时，将此变量添加到您的项目数组中。

javascript - React 中的文本输入未启用按钮？

问题描述

解决方案

推荐阅读