MDL-JS-리플 효과 event.target.value는 반작용 구성 요소 정의가되게

Question

바닐라 MDL (<script src="material.js">) 또는 react-mdl를 사용하여 사용하여 I는 mdl-js-ripple-effect MDL 클래스 (또는 react-mdl와 리플 특성)를 추가하면 버튼에 대해 버튼 요소의 event.target.value은 정의되지 않습니다 (이벤트 핸들러는 반응에서 상태를 수정 중입니다). 리플 효과가 없으면 잘 작동합니다. 리플 효과를 사용하여 이 아닌 이외의 솔루션을 찾을 수 없습니다. 그러나 그것은 버튼을 매우 지루하게 만든다. 이 MDL과 반응하여 문제가 될 것 같다,하지만 난

클릭 처리기 (나는 create-react-app을 사용하고 있습니다) ... 사람이 더 알고있을 생각 :

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

하는 사용하여 구성 요소를 "키"반작용을 react-mdl :

나는 button 요소와 바닐라 MDL 사용하는 경우

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

같은 문제가 발생합니다

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}). 그러나 과 리플은 정의되지 않습니다.

누구나이 경험이 있거나 왜 이런 일이 발생했는지 또는 해결 방법이 궁금하십니까?

Answer 1

mdl-js-ripple-effect 클래스는 button 요소를 스타일 span 요소로 대체하여 value 특성을 제거합니다.

대신 this.props.value을 통해 value 속성에 액세스 할 수 있습니다.

여기에 event.target.value 대 this.props.value의 값을 표시하는 jsFiddle이 있습니다.