Question

我想更新表单中的数据。这是我想要的外观。 Here's how it looks like

我尝试了两种方法。第一个可以完美地删除项目。

 const MyApp = ({ getItems, deleteItem, isAuthenticated, item, updateItem }) => {

  useEffect(() => {
    getItems();
  }, []);


   const [itemName, setItemName] = useState({
     name: '',
     content: ''
   });


  const onChange = e => {
    setItemName({
       ...itemName,
      [e.target.name]: e.target.value
    });
  };

  const onDeleteClick = id => {
    deleteItem(id);
  };

  const { items } = item;
  return (
    <Container>
      <div className="mb-3"></div>
      <ListGroup>
        <TransitionGroup className="shopping-list" >
          {items.map(({ _id, name, content, date }) => (
            < CSSTransition key={_id} timeout={500} classNames="fade" >
              <ListGroupItem className="mb-3">
                {isAuthenticated ?
                  <div>
                    <Form onSubmit={e => {
                      e.preventDefault();
                      const { name, content } = itemName;
                      const newItem = {
                        name,
                        content
                      }
                      // Add item via addItem action
                      updateItem(_id, newItem);
                    }}
                    >
                      <FormGroup>
                        <Button
                          style={{
                            position: "absolute",
                            left: "100%",
                            marginLeft: "-2.2rem",
                            marginTop: "-0.8rem"
                          }}
                          color="danger"
                          size="md"

                          onClick={onDeleteClick.bind(this, _id)}
                        >&times;
                  </Button>
                        <Label for="item">Header</Label>
                        <Input
                          type="text"
                          name="name"
                          id="item"
                          defaultValue={name}
                          // value={name}
                          placeholder="Add shopping item"
                          onChange={onChange}
                        />
                        <Label for="item">Content</Label>
                        <Input
                          type="textarea"
                          name="content"
                          id="item"
                          defaultValue={content}
                          //value={content}
                          placeholder="Add shopping item"
                          onChange={onChange}
                        />
                        <Button
                          color="dark"
                          style={{ marginTop: '2rem' }}
                          block>
                          Change
                </Button>
                      </FormGroup>
                    </Form>
                  </div> :
                  <div>
                    <h2>{name}</h2>
                    <p>{content}</p>
                    <p>{date.replace("T", " ").slice(0, -8)}</p>
                  </div>
                }
              </ListGroupItem>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
    </Container>
  );
}

MyApp.propTypes = {
  getItems: PropTypes.func.isRequired,
  item: PropTypes.object.isRequired,
  isAuthenticated: PropTypes.bool
}

const mapStateToProps = (state) => ({
  item: state.item,
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(
  mapStateToProps,
  { getItems, deleteItem, updateItem }
)(MyApp);

在定义defaultValue的输入中，我可以更改数据，但是问题是，在单击“更改”之前，我需要更改输入中的数据，否则会得到可预测的空字段，因为useState参数定义为（这是添加新项目的好方法。

 const [itemName, setItemName] = useState({
         name: '',
         content: ''
       });

如果我分别将输入值属性定义为名称和内容，则无法更改输入中的值，这对我来说也是可以理解的，因为在onChange函数中，我使用setItemName。

const onChange = e => {
        setItemName({
           ...itemName,
          [e.target.name]: e.target.value
        });
      };

但是整个表单都包含在items.map函数中。

const { items } = item;
  return (
    <Container>
      <div className="mb-3"></div>
      <ListGroup>
        <TransitionGroup className="shopping-list" >
          {items.map(({ _id, name, content, date }) => ...

所以我想按ItemName进行映射。我做到了：

 useEffect(() => {
    getItems();
    const { items } = item;
    setItemName(items);
  }, []);

我认为它可以正常工作，因为它在ItemName.map中显示了所有表单，但是编辑参数存在很多问题。因此，我当然更改了itemName.map上的items.map。这样，我可以缩短onSubmit属性，因为现在不需要解构itemName，因为我可以通过它进行映射。问题出在onChange函数上。我尝试了很多方法，当我尝试键入任何内容时，我都以错误的方式输入错误，我尝试执行以下两种错误： 1）TypeError：itemName.map不是一个函数 2）e.target未定义或目标未定义

因此，我想更新数据，并希望在编辑模式开始时显示旧数据，如果仅更改一个输入（例如内容），则单击“提交”时，我希望更改所有数据。

在反应中使用onChange输入更新状态

0 个答案: