2

バニラの mdl ( <script src="material.js"> ) または を使用している場合、ボタンにmdl クラス (または の ripple 属性)react-mdlを追加すると、ボタン要素の が未定義になります (イベント ハンドラーが反応で状態を変更しています)。波及効果がなければ、うまく機能します。波及効果を使用しない以外に解決策が見つかりません。しかし、それはボタンを非常に退屈にします。反応をmdlで使用すると問題があるようですが、誰かがもっと知っているのではないかと思いました...（私は使用しています）mdl-js-ripple-effectreact-mdlevent.target.valuecreate-react-app

クリック ハンドラー:

  handleButtonClick(event){
    event.preventDefault();
    this.setState({input: this.state.input + event.target.value});
  }

を使用する「キー」React コンポーネントreact-mdl:

function Key (props) {
    return(
      <Button raised colored ripple
        value={props.value}
        onClick={props.handleButtonClick}>
        {props.value}
      </Button>
    );
}

button要素でバニラ mdl を使用すると、同じ問題が発生します。

function Key (props) {
    return(
        <button className="mdl-button mdl-js-button mdl-button--raised 
            mdl-js-ripple-effect mdl-button--colored"
            value={props.value}
            onClick={props.handleButtonClick}>
          {props.value}
       </button>
    );
}

リップルを削除すると、ボタンがクリックされたときの状態event.target.value( ) になります。value={props.value}しかし、リップルでは未定義です。

誰もがこれを経験したか、なぜこれが起こっているのか、または回避策を知っていますか?

4

1 に答える 1

1

The mdl-js-ripple-effect class replaces the button element with a styled span element, removing it's value attribute.

You can access the value attribute via this.props.value instead.

Here's a jsFiddle showing the values of event.target.value vs this.props.value.

于 2017-01-23T13:17:26.170 に答える