模式中的React-Materialize甚至Materialize-css中的單選按鈕不起作用

Question

因此，它似乎甚至不在模式內部，而是單選按鈕onChange無法正常工作。 click / onChange將被注冊一次，甚至不會在第一次單擊時注冊（它需要第二次點擊，就像需要准備單擊按鈕一樣），然后，按鈕看起來像它們一樣工作正常，但是onClick再也不會被注冊。 。 僅一次而已

我完全遵循了本文檔，並且對我所有的表單/ onChange按鈕都使用了相同的表單提交方法

Answer 1

我遇到了同樣的問題，並注意到他們為修復Radios所做的最后一個補丁實際上破壞了這種行為。 恢復到上一個​​以前的版本可以解決此問題。 還不是一個固定的解決方案，但是在那之前，它會讓您再次工作。

看起來這個問題（標記為已關閉）是罪魁禍首。 https://github.com/react-materialize/react-materialize/issues/422

Answer 2

因此，我的解決方案基本上是使radio buttons具有反應性，並為按鈕添加一些實現。 只需將所有值的name屬性保持相同，然后移到正確的this.state

<Row onClick={this.handleChange} >
  <Col s={12}>
    <Col s={4} style={{marginTop: '80px'}}>
        <Col s={12}>
          <Col s={3} className='center'><Button type="button" value="endangered" name="cause" floating={true} className={(this.state.cause === 'endangered') ? 'green' : 'blue'} style={radioStyle}/></Col>
          <Col s={9}><label>Endagered Animals & Wildlife</label></Col>
        </Col>
        <Col s={12}>
            <Col s={3} className='center'><Button type="button" value="microplastics" name="cause" floating={true} className={(this.state.cause === 'microplastics') ? 'green' : 'blue'} style={radioStyle}/></Col>
            <Col s={9}><label>Microplastics & Ocean Pollution</label></Col>
        </Col>
        <Col s={12}>
            <Col s={3} className='center'><Button type="button" value="carbon" name="cause" floating={true} className={(this.state.cause === 'carbon') ? 'green' : 'blue'} style={radioStyle}/></Col>
            <Col s={9}><label>Carbon Deposits & Emission</label></Col>
        </Col>
        <Col s={12}>
          <Col s={3} className='center'><Button type="button" value="other" name="cause" floating={true} className={(this.state.cause === 'other') ? 'green' : 'blue'} style={radioStyle}/></Col>
          <Col s={9}><label>Company SignUp</label></Col>
        </Col>
    </Col>
  </Col>
</Row>