Reactjs 为什么React/Redux表单中的输入会将数字更改为字符串？

我正在React和Redux中构建一个表单。当我在表单中输入赢和输时，赢和输的输入将数字输入更改为字符串。表单未保存，因为数据类型应为数字。当我将数字输入表单时，我不希望它变成字符串

class TeamForm extends Component {
   handleOnChange = event => {
      const { name, value } = event.target;

      const currentTeamFormData = Object.assign({}, 
      this.props.teamFormData, {
        [name]: value
        });
      this.props.updateTeamFormData(currentTeamFormData);
  };

   handleOnSubmit = event => {
       event.preventDefault();
       this.props.createTeam(this.props.teamFormData);
   };

    render() {
        const { name, wins, losses, logo_url } = this.props.teamFormData;
        return (
          <div className="teamForm">
            <h1>Add a team to the League</h1>
            <form onSubmit={this.handleOnSubmit}>
              <div>
                <label htmlFor="name">Name:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="name"
                  value={name}
                />
              </div>
              <div>
                <label htmlFor="wins">Wins:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="wins"
                  value={wins}
                />
              </div>
              <div>
                <label htmlFor="losses">Losses:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="losses"
                  value={losses}
                />
              </div>
              <div>
                <label htmlFor="logo_url">Logo url:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="logo_url"
                  value={logo_url}
                />
              </div>

              <button type="submit">Add Team</button>
            </form>
          </div>
      );
    }
}

    export const updateTeamFormData = teamFormData => {
      debugger;
      return {
        type: "UPDATED_DATA",
        teamFormData
      };
    };

    export const resetTeamForm = () => {
      return {
        type: "RESET_TEAM_FORM"
      };
    };


    const initialState = {
       name: "",
       wins: 0,
       losses: 0,
       logo_url: ""
    };

   export default (state = initialState, action) => {
      switch (action.type) {
        case "UPDATED_DATA":
          return action.teamFormData;

        case "RESET_TEAM_FORM":
          return initialState;

        default:
          return state;
      }
   };

我想问题可能是我的

更改了表单的

class TeamForm extends Component {
   handleOnChange = event => {
      const { name, value } = event.target;

      const currentTeamFormData = Object.assign({}, 
      this.props.teamFormData, {
        [name]: value
        });
      this.props.updateTeamFormData(currentTeamFormData);
  };

   handleOnSubmit = event => {
       event.preventDefault();
       this.props.createTeam(this.props.teamFormData);
   };

    render() {
        const { name, wins, losses, logo_url } = this.props.teamFormData;
        return (
          <div className="teamForm">
            <h1>Add a team to the League</h1>
            <form onSubmit={this.handleOnSubmit}>
              <div>
                <label htmlFor="name">Name:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="name"
                  value={name}
                />
              </div>
              <div>
                <label htmlFor="wins">Wins:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="wins"
                  value={wins}
                />
              </div>
              <div>
                <label htmlFor="losses">Losses:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="losses"
                  value={losses}
                />
              </div>
              <div>
                <label htmlFor="logo_url">Logo url:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="logo_url"
                  value={logo_url}
                />
              </div>

              <button type="submit">Add Team</button>
            </form>
          </div>
      );
    }
}

    export const updateTeamFormData = teamFormData => {
      debugger;
      return {
        type: "UPDATED_DATA",
        teamFormData
      };
    };

    export const resetTeamForm = () => {
      return {
        type: "RESET_TEAM_FORM"
      };
    };


    const initialState = {
       name: "",
       wins: 0,
       losses: 0,
       logo_url: ""
    };

   export default (state = initialState, action) => {
      switch (action.type) {
        case "UPDATED_DATA":
          return action.teamFormData;

        case "RESET_TEAM_FORM":
          return initialState;

        default:
          return state;
      }
   };

任何帮助或见解都将不胜感激。谢谢
 无论输入类型如何，输入值始终作为字符串发送给您。
当您使用
input type=“number”
时，它只会帮助浏览器显示数字键盘

在调用操作之前，或者在操作本身内部，您必须将值强制转换为Int
parseInt（myValue）
。
更新：由于它是一种常规形式，您可以在
事件侦听器中处理此问题：

handleOnChange = event => {
    const { name, value, type } = event.target;

    const currentTeamFormData = Object.assign({}, this.props.teamFormData, {
      [name]: type === "number" ? parseInt(value, 10) : value
    });

    this.props.updateTeamFormData(currentTeamFormData);    
};

在这里，我检查
input.type
，这样
handleOnChange
就可以保持足够的抽象/通用性，但您可以使用任何其他技术来区分数字类型的输入（甚至可以创建单独的处理程序）。其目的是查看它是否为数字类型，如果是，请使用
parseInt
将其转换为数字

这里有一个更新的（注意，我用
setState
演示了核心概念，但这不是必须的；您可以像现在这样使用redux操作）

旧答案；为子孙后代离开这里

Redux表单为此提供了一个函数：

<input
    type="number"
    onChange={this.handleOnChange}
    name="wins"
    value={wins}
    parse={value => parseInt(value, 10)}
/>

parseInt（值，10）}
/>

请注意，
type=“number”
对表单存储数据的方式没有影响。它只对现代浏览器有用，因为现代浏览器可以显示数字键盘，从而使表单更加友好。
解析行不会解析传递到值中的数字。对此有其他建议吗？它有：。查看添加
parseInt
后存储值如何更改为数字。这里是沙盒：我没有使用redux表单。我在哪里将
parseInt
应用于当前表单输入。您将其标记为redux表单！：）查看我的更新。