Question

我已记录：我的商店中为false，我需要在react js中组件的按钮操作上将其更改为true。如果您能告诉我如何编辑/更新存储中的数据或共享链接？

Answer 1

如何创建商店

const redux = require('redux');
const createStore = redux.createStore;

const initialState = {
    counter: 0
}

const rootReducer = (state = initialState, action) => {
  if(action.type === 'INC_COUNTER'){
    return {
      ...state,
      counter: state.counter + 1
    };
  }

  return state;
};

如何调用操作

const mapDispatchToProps = dispatch => {
  return {
    onIncrementCounter: () => dispatch({type:'INC_COUNTER'})
  };
};

点击即可调用

<button clicked={this.props.onIncrementCounter} />

Answer 2

Here is a simple React Component which implements create,read,update,delete functionality:

[您还可以在codesanbox.io https://codesandbox.io/s/81r0n6l112

上查看代码实现。

import React from "react";
import idGenerator from "react-id-generator";

export default class App extends React.Component {
  state = {
    employees: [],
    firstname: "",
    lastname: "",
    id: 0,
    create: true
  };
  componentDidMount() {
    //Intializing sample data
    const emps = [
      { firstname: "John", lastname: "Doe", id: 0 },
      { firstname: "Bruno", lastname: "Mars", id: 0 }
    ];
    this.setState({
      employees: emps.map(e => {
        return {
          firstname: e.firstname,
          lastname: e.lastname,
          id: idGenerator()
        };
      })
    });
  }

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

  handleCreateEmployee = () => {
    if (this.state.employees) {
      this.setState({
        employees: [
          ...this.state.employees,
          {
            firstname: this.state.firstname,
            lastname: this.state.lastname,
            id: idGenerator()
          }
        ]
      });
    } else {
      this.setState({
        employees: [
          {
            firstname: this.state.firstname,
            lastname: this.state.lastname,
            id: idGenerator()
          }
        ]
      });
    }
    this.setState({ firstname: "", lastname: "" });
  };

  handleEdit = e => {
    const employee = this.state.employees.find(function(emp) {
      if (emp.id === e.target.id) {
        return emp;
      }
    });
    this.setState({
      firstname: employee.firstname,
      lastname: employee.lastname,
      id: employee.id,
      create: false
    });
  };
  handleDelete = e => {
    this.setState({
      employees: this.state.employees.filter(function(emp) {
        if (emp.id !== e.target.id) return emp;
      })
    });
  };
  handleUpdateEmployee = () => {
    const employee = {
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      id: this.state.id
    };
    const employeesupdated = this.state.employees.map(emp => {
      if (emp.id === this.state.id) {
        return employee;
      } else return emp;
    });

    this.setState((prevStae, props) => ({
      employees: employeesupdated,
      create: true,
      firstname: "",
      lastname: ""
    }));
  };

  render() {
    const create = this.state.create ? "Save" : "Update";
    const { employees } = this.state;
    const inputIsEmpty =
      this.state.firstname === "" || this.state.lastname === "" ? true : false;
    return (
      <div>
        <input
          style={{ width: 120 }}
          type="text"
          placeholder="Enter Firstname"
          onChange={this.handleChange}
          name="firstname"
          value={this.state.firstname}
        />
        <input
          style={{ width: 120 }}
          type="text"
          placeholder="Enter Firstname"
          onChange={this.handleChange}
          name="lastname"
          value={this.state.lastname}
        />

        <button
          style={{ width: 150 }}
          disabled={inputIsEmpty}
          onClick={
            this.state.create
              ? this.handleCreateEmployee
              : this.handleUpdateEmployee
          }
        >
          {create}
        </button>
        <br />
        <table border="1" style={{ width: 400, paddingTop: 5 }}>
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            {employees.map((emp, i) => {
              return (
                <tr key={i}>
                  <td>{emp.firstname}</td>
                  <td>{emp.lastname}</td>
                  <td>
                    <button onClick={this.handleEdit} id={emp.id}>
                      Edit
                    </button>
                  </td>
                  <td>
                    <button onClick={this.handleDelete} id={emp.id}>
                      Delete
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
[You can also view the code implementation here][1]


  [1]: https://codesandbox.io/s/81r0n6l112

如何通过组件编辑存储中的数据？ REACT JS

2 个答案: