Question

我在使用Redux-Form和Materialize.css的单选按钮时遇到了问题。

由于语法问题（我相信label是它的原因），如果我将两者结合起来，它就会停止工作（这意味着我无法选择任何单选按钮）。如果我取出materialize.css，Redux-Form可以正常工作。

是否可以将这两者结合起来？

以下是代码片段：

  render() {
    const { chartData, chartOptions } = this.state;
    const { handleSubmit, submitting } = this.props
    return (
      <main className="welcome container">
        <div className="row">
          <div className="col center-align s12">
            <h3>Title of the Poll</h3>
          </div>
        </div>
        <BarChart data={chartData} options={chartOptions}/>
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <div className="row">
            <div className="col s12">
              <p>
                <Field name="category" component="input" type="radio" value="male"/>
                <label>Male</label>
              </p>
              <p>
                <Field name="category" component="input" type="radio" value="female"/>
                <label>Female</label>
              </p>
            </div>
            <div className="col input-field s12">
              <button className="btn waves-effect waves-light" type="submit" name="action">Submit
                <i className="fa fa-paper-plane-o"></i>
              </button>
            </div>
          </div>
        </form>
      </main>
    )
  }

Answer 1

看看CSS，看起来像是默认的Materialze.css，html的输入单选按钮的left属性99px离开了屏幕。

知道这一点，我不得不自己插入一个自定义CSS来移动输入并将其对齐在用于渲染渲染的单选按钮上方。

这是我想出的：

<强> CSS

.radio-button-css{
  position: relative !important;
  z-index: 12;
  // opacity: 1 !important;
  left: 18px !important;
}

注意我已在“字段”属性

中插入radio-button-css

      <div className="row">
        <div className="col s12">
          <p>
            <Field name="category" component="input" type="radio" className="radio-button-css" value="male"/>
            <label>Male</label>
          </p>
          <p>
            <Field name="category" component="input" type="radio" className="radio-button-css" value="female"/>
            <label>Female</label>
          </p>
        </div>
        <div className="col input-field s12">
          <button className="btn waves-effect waves-light" type="submit" name="action">Submit
            <i className="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>

从那里，调整left中的radio-button-css属性，完成后，将不透明度设置为零（您需要将其设置为实际，请参阅html＆＃39; s单选按钮）

Redux-Form（V6）＆amp; Materialize.css的单选按钮不起作用

1 个答案: