Почему ввод в форме React / Redux превращает число в строку? - PullRequest
Новая
       5

Почему ввод в форме React / Redux превращает число в строку?

0 голосов
/ 03 ноября 2018

Я строю форму в React и Redux. Ввод для выигрышей и проигрышей изменяет ввод числа в строку, когда я набираю ее в форме. Форма не сохраняется, потому что тип данных должен быть числом. Я не хочу, чтобы число менялось в строку при вводе в форму.

Я думаю, что проблема может быть с моим handleOnChange для формы. 

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;
      }
   };

Любая помощь или понимание приветствуется. Спасибо!

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

Обновления : Поскольку это обычная форма, вы можете просто обработать ее в своем handleOnChange слушателе событий: 

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 предлагает функцию parse для этой цели: 

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

Обратите внимание, что type="number" не влияет на то, как форма хранит данные. Это полезно только в современных браузерах, которые могут отображать цифровую клавиатуру, что, в свою очередь, делает вашу форму более удобной для пользователя.

0 голосов
/ 03 ноября 2018

Входные значения всегда отправляются вам в виде строк независимо от типа ввода. Когда вы используете input type=“number”, это только помогает браузеру представить цифровую клавиатуру, например.

Вы должны либо преобразовать значение в Int (parseInt) перед вызовом своего действия, либо внутри самого действия.

...