Реагировать на использование формы для кнопок IMG - PullRequest
Новая
       11

Реагировать на использование формы для кнопок IMG

0 голосов
/ 07 марта 2019

Я пытаюсь создать игру в камень, бумагу и ножницы в реакции. Я бы предположил, что для этого имеет смысл использовать форму, я бы по крайней мере использовал форму, если бы не было реакции.

Я подумал, что самым простым способом сделать это будет три радиовхода и отправка.

Тем не менее, поскольку я хочу использовать три изображения в качестве фактических переключателей. Будет ли вообще иметь смысл использовать форму, так как реагирование направлено на то, чтобы вывести государство из формы. Это точка в моем коде, где я понял, что могу оказаться в стороне. 

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

  render() {
    return (
      <div>
        <div>
          <form>
            <input type="radio" value="Rock" name="gender" onChange={this.onChangeHandler} /> Rock
            <input type="radio" value="Paper" name="gender" onChange={this.onChangeHandler} /> Paper
            <input type="radio" value="Scissor" name="gender" onChange={this.onChangeHandler} /> Scissor
            <input type="submit" value="Submit" onClick = () => {submit()}/>
          </form>
        </div>

        <div>
          <img id="r" value="rock" src="http://www.jerrylow.com/demo/rps/rock.svg" alt="a rock" />
          <img id="p" value="paper" src="http://www.jerrylow.com/demo/rps/paper.svg" alt="a piece of paper" />
          <img id="s" value="scissor" src="http://www.jerrylow.com/demo/rps/scissor.svg" alt="a scissor" />
        </div>)
  }

Должен ли я использовать эту форму, даже если она не предназначена для какой-либо конкретной цели. Если да, то как мне интегрировать его с элементами img?

1 Ответ

1 голос
/ 07 марта 2019

У вас есть несколько способов сделать это.Вы можете полностью отказаться от формы и прикрепить onClick слушателей к каждому из изображений, которые будут изменять состояние при нажатии, а затем иметь кнопку, которая при нажатии вызовет вашу функцию отправки.

Или, если вы хотитесохраняя форму, вы можете либо обернуть переключатели и изображения в метки, либо скрыть переключатели, чтобы при нажатии на изображение вызывалось onChange.Или, вы можете указать for реквизит на ярлыке, который совпадает с идентификатором переключателя и иметь изображение в нем, и он будет вести себя, как описано выше, что-то вроде 

<input type="radio" id="myButton" onChange={handleChange} />
<label for="myButton"><img src="img.png" /></label>

Я думаю, этодействительно сводится к решению, которое вы хотите, потому что в любом случае было бы хорошо.Лично я предпочел бы не использовать форму для этого сценария просто потому, что это не так необходимо, и код будет меньше.

...