Question

我正在建立一个类似youtube上的评论系统。在我的实现中，当我单击“修改”时，所有注释现在都是输入，但是仅所选输入的值将被修改。如何仅触发我单击的元素。

如您所见，它会触发所有数组元素

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div className="container mt-5">
      <MDBRow>
        {data &&
          data.map((item) => (
            <MDBCol md="7" lg="7" key={item.id} className="mb-4">
              {!open && (
                <>
                  <div className="font-weight-bolder float-left pr-2">
                    {item.name}
                  </div>
                  <div className="float-right pr-2">
                    <button
                      onClick={() => {
                        setOpen(true);
                      }}
                    >
                      Modifier
                    </button>
                  </div>
                </>
              )}
              {open && (
                <UpdateData
                  id={item.id}
                  name={item.name}
                  onAbort={() => setOpen(false)}
                  submit={() => setOpen(false)}
                />
              )}
            </MDBCol>
          ))}
      </MDBRow>
    </div>
  );
}


export const UpdateData = ({ name, id, onAbort, submit }) => {
  const formik = useFormik({
    initialValues: {
      id: id,
      name: name,
    },
    onSubmit: async (values) => {
      console.log(values);
      submit();
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <MDBInput
        value={formik.values.name}
        name="name"
        onChange={formik.handleChange}
      />
      <div className="float-right">
        <span onClick={onAbort} className="text-capitalize grey-text">
          Cancel
        </span>
        <button type="submit">confirm</button>
      </div>
    </form>
  );
};

这是sandbox 我创建的

Answer 1

要仅触发一个元素被点击，您必须传递索引

    function App() {
      const [open, setOpen] = useState(false);
      const [selectedRow, setSelectedRow] = useState(undefined);
    
      const onSelectedRow = (index) => {
       setSelectedRow(index);
       setOpen(true);
     }
    
      return (
        <div className="container mt-5">
          <MDBRow>
            {data &&
// here you will get the index
              data.map((item,index) => ( 
                <MDBCol md="7" lg="7" key={item.id} className="mb-4">
                  {!open && (
                    <>
                      <div className="font-weight-bolder float-left pr-2">
                        {item.name}
                      </div>
                      <div className="float-right pr-2">
// Now onClick pass the index of selected row to onSelectedRow

                        <button
                          onClick={() =>onSelectedRow(index)}
                        >
                          Modifier
                        </button>
                      </div>
                    </>
                  )}
// here add condition to open selected row
                  { (open === true && selectedRow === index) ? (
                    <UpdateData
                      id={item.id}
                      name={item.name}
                      onAbort={() => setOpen(false)}
                      submit={() => setOpen(false)}
                    />
                  ) : null
                 }
                </MDBCol>
              ))}
          </MDBRow>
        </div>
      );
    }

沙盒代码https://codesandbox.io/s/youthful-wave-k4eih?file=/src/App.js

如果您在下面有任何查询评论！

Answer 2

除了在钩子中没有默认值false之外，您还应该为每个元素都有唯一的键。默认情况下，它适用于所有元素。

反应只触发数组中的一个元素

2 个答案: