为Redux-Form向导制作自定义单选按钮

Question

我跟随此示例：https://redux-form.com/6.6.3/examples/wizard/

到目前为止，我已经设法制作了我需要的所有东西，但我却陷入了制作自定义单选按钮的困境。

这是我到目前为止所做的，但是当点击代表它的div时，我无法更改单选按钮

import React, { Component } from 'react'
import './pictureCard.css'
import '../../../../app.css'
import MaterialIcon from 'react-google-material-icons'
import { Field } from 'redux-form'

export default class PictureCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isChecked: false
    }
  }
  handleTick = event => {
    const card = event.target
    card.classList.toggle('question__checkbox--selected')
    this.setState(prevState => {
      return { isChecked: !prevState.isChecked }
    })
  }

  render() {
    const {
      tabOrder,
      cardName,
      cardKey,
      cardLabel,
      thumbnail,
      thumbnailAlt
    } = this.props

    return (
      <li
        className="question__choice"
        tabIndex={tabOrder}
        onClick={this.handleTick}
      >
        <Field
          name={cardName}
          type="radio"
          component="input"
          value={cardLabel}
          checked={this.state.isChecked}
        />
        <div className="question__tick-wrap">
          <MaterialIcon icon="check" />
        </div>
        {thumbnail === undefined ? null : (
          <div className="question__image-wrap">
            <img src={thumbnail} alt={thumbnailAlt} />
          </div>
        )}
        <div className="question__text-wrap flex flex--center-vertical">
          <div className="question__label">
            <div className="question__letter">
              <span>{cardKey}</span>
            </div>
          </div>
          <div className="question__text-label">{cardLabel}</div>
        </div>
        <div className="question__bg" />
      </li>
    )
  }
}

我可以以编程方式更改价值，但它在商店中没有更新，我也不知道为什么:(

这就是我的尝试：

import React, { Component } from 'react'
import './pictureCard.css'
import '../../../../app.css'
import MaterialIcon from 'react-google-material-icons'
import { Field } from 'redux-form'

export default class PictureCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      valueTest: false
    }
  }
  handleTick = event => {
    const card = event.target
    card.classList.toggle('question__checkbox--selected')
    this.setState({ valueTest: 'Hello' })
  }

  render() {
    const {
      input,
      tabOrder,
      cardName,
      cardKey,
      cardLabel,
      thumbnail,
      thumbnailAlt
    } = this.props

    return (
      <li
        className="question__choice"
        tabIndex={tabOrder}
        onClick={this.handleTick}
      >
        <input
          {...input}
          name={cardName}
          value={this.state.valueTest}
          type="text"
          tabIndex={tabOrder}
        />
        <div className="question__tick-wrap">
          <MaterialIcon icon="check" />
        </div>
        {thumbnail === undefined ? null : (
          <div className="question__image-wrap">
            <img src={thumbnail} alt={thumbnailAlt} />
          </div>
        )}
        <div className="question__text-wrap flex flex--center-vertical">
          <div className="question__label">
            <div className="question__letter">
              <span>{cardKey}</span>
            </div>
          </div>
          <div className="question__text-label">{cardLabel}</div>
        </div>
        <div className="question__bg" />
      </li>
    )
  }
}