Question

我学习redux并且能够更新单个输入字段，但是当有超过1个输入字段无法更新两个输入字段的状态时！

这是我的代码，请检查一下。

我的主要index.js：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import  {FormReducer}  from "./reducers/name";
import { createStore } from "redux";
import { Provider } from "react-redux";

const store = createStore(FormReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,

  document.getElementById("root")
);

我的演示和输入字段组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "./actions";

class App extends Component {
  inputData = event => {
    this.props.actions.addToDo({ name: event.target.value });
  };
  submitData = event => {
    console.log(this.props.name);
    // console.log(this.props.mobile);
    event.preventDefault();
  }
  render() {
    return (
      <div>
        <form onSubmit={this.submitData}>
          FirstName:
          <input
            type="text"
            name={this.props.name}
            onChange={this.inputData}
          />
          <input
            type="text"
            name={this.props.mobile}
            onChange={this.inputData2}
          />
          <button type="submit">Submit</button>
        </form>
        {this.props.name}
        {this.props.mobile}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  mobile: state.mobile,
  name: state.name
});
const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

在我的演示组件中，我希望输入接受像[event.target.name]这样的数组：event.target.value或类似的东西。但是当我尝试用redux做到这一点时，它无法正常工作。请检查我的代码并提供您的意见！

我的减速机功能：

let init = {
  name: ''
}

export const FormReducer = (state = init, action) => {
  switch (action.type) {
    case "ADD_NAME":
      return {...state, name:action.name, mobile:action.mobile}
    default:
      return state;
  }
};

我的动作功能对新输入采取行动：

let init = {
  name: ''
}

export const FormReducer = (state = init, action) => {
  switch (action.type) {
    case "ADD_NAME":
      return {...state, name:action.name, mobile:action.mobile}
    default:
      return state;
  }
};

而且你也可以看到我想同时打印名称和手机，但它只是打印我正在工作的打印。请提供代码，以便我能够同时打印。

提前致谢！

Answer 1

应该是这样的。

使用ecma6#computed property name [event.target.name]

inputData = event => {
    this.props.actions.addToDo({ [event.target.name]: event.target.value });
  };

编辑：

在Reducer中

，添加此内容。

 let init = {
  name: { key : "name", value : "" },
  mobile: { key: "mobile", value: "" },
};

reducer：

case "ADD_NAME":
    console.log(action,state);
    return {
      ...state,
      name: {
        ...state.name, value: action.name||state.name.value
      },
      mobile: {
        ...state.mobile,
        value: action.mobile || state.mobile.value
      }
    };

如果您签入了渲染，则两个输入字段都需要name属性，该属性未初始化，并且通过props中映射的mapStateToProps显示为空白。因此，您没有在事件处理程序中获得name属性。

需要启动它。我假设mobile和name。

Answer 2

首先在这里制作状态并保存字段输入。

state = {
    username: "",
    password: ""
  }

其中updateValue将值从输入保存到状态

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

<input type="text" name="username"  value={this.state.username} onChange={(e) => this.updateValue(e)} />
<input type="password" name="password" value={this.state.password} onChange={(e) => this.updateValue(e)} />

然后您可以从州收集数据并将其传递给您的函数，例如此登录表单。

  submitData = event => {
   const user = {
     username: this.state.username,
     password: this.state.password
   }
   // now pass this `user` to your action
    event.preventDefault();
  }

在redux中接受多个输入字段？

2 个答案: