代码之家 › 专栏 › 技术社区 › enoch

React只触发数组中的一个元素

reactjs arrays javascript

enoch · 技术社区 · 4 年前

我正在制作一个类似youtube的评论系统。在我的实现中,当我单击modify时,所有注释现在都是输入,但是只有所选输入的值将被修改。如何只触发我单击的元素。

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

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 我创造的

2 回复 | 直到 4 年前

Asif Mushtaq 4 年前

要只触发一个被单击的元素,必须传递索引

    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

如果您有任何疑问请在下面留言!

Deepak Suthar 4 年前

false 钩子中的默认值应该为每个元素都有一个唯一的键。默认情况下,它适用于所有元素。