reactjs - 无法对特定事物进行操作

Question

我是 React 新手，创建了一个示例 ContactList 项目。

问题是我无法在我的联系人列表中进行编辑操作。我不知道我要去哪里错了。你能帮我解决这个问题吗？

我已经尝试过使用 redux

*在编辑组件中

class EditContact extends Component {
  constructor(props) {
    super(props);
    this.state = {
        open: false,
        firstname: props.contact.firstname,
        lastname: props.contact.lastname,
        email: props.contact.email,
        phone: props.contact.phone
      };

      this.show = dimmer => () => this.setState({ dimmer, open: true });
      this.close = () => this.setState({ open: false });

      this.changeHandler = ({ target }) => {
        const name = target.name;
        const value = target.value;
        this.setState({ [name]: value });
      };

     this.update = event => {
        event.preventDefault();
        const updateContact = {
          firstname: this.state.firstname,
          lastname: this.state.lastname,
          email: this.state.email,
          phone: this.state.phone
        };


        this.props.EditContact(updateContact);
      };
    }  
      render() {
        const { open, dimmer } = this.state;
        return (
          <div>
            <Button circular icon="edit" color="green" onClick={this.show(true)} />
            <Modal dimmer={dimmer} open={open} onClose={this.close}>
              <Modal.Header>Select a Photo</Modal.Header>
              <Modal.Content image>
                <Image
                  wrapped
                  size="small"
                  src="https://react.semantic-ui.com/images/avatar/large/rachel.png"
                />
                <Form>
                  <Form.Field inline widths='equal'>
                    <label>First name</label>
                    <Form.Input
                      fluid
                      type="text"
                      className="txtBox"
                      name="firstname"
                      value={this.state.firstname}
                      onChange={this.changeHandler}
                    />
                    <label>Last name</label>
                    <Form.Input
                      fluid
                      type="text"
                      className="txtBox"
                      name="lastname"
                      value={this.state.lastname}
                      onChange={this.changeHandler}
                    />
                    <Form.Input
                      fluid
                      label="Phone Number"
                      type="number"
                      className="txtBox"
                      name="phone"
                      value={this.state.phone}
                      onChange={this.changeHandler}
                    />
                    <Form.Input
                      fluid
                      label="Email"
                      type="email"
                      className="txtBox"
                      name="email"
                      value={this.state.email}
                      onChange={this.changeHandler}
                    />
                  </Form.Field>
                </Form>
              </Modal.Content>
              <Modal.Actions>
                <Button color="black" onClick={this.close}>
                  Cancel
                </Button>
                <Button
                  positive
                  icon="checkmark"
                  labelPosition="right"
                  content="Edit"
                  onClick={this.update}></Button>
              </Modal.Actions>
            </Modal>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
  return{
    contacts: state.contacts
  }
}

const mapDispatchToProps = (disptach) => {
  return{
    EditContact: updateContact => dispatchEvent(bodyActions.EditContact(updateContact))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(EditContact);

在减速机中：

import actions from "./actions";
const initialState = {
  contacts:[],
contact: {},

};

const reducer =  (state=initialState, action={}) => {
    switch (action.type) {

case actions.EDIT_CONTACT:
           return{
            ...state,
            contacts: state.contacts.map(item => {
              if (item.id === action.payload.id) {
                return action.payload
              } else {
                return item
              }
            })
           }  
        default:
      return state;
  }
};

export default reducer;

当我单击编辑选项时，它既不显示编辑组件也不执行任何编辑操作。

标签： reactjsreact-redux

Answer 1

编辑：

我EditContact在 Contact.jsx 的第 38 行添加了组件而不是编辑按钮。

• 旧代码

...

    <Button
       className="myButton"
       circular
       icon="trash alternate"
       color="google plus"
       onClick={() => deleteContact(contact.id)}
    />
...

• 更新代码

...

    <EditContact contact={contact} />
...