ボタンコンポーネントの値を取得できませんonClick

Question

これは些細なことだと確信していますが、ユーザーがボタンをクリックしたときにボタンの値にアクセスする方法を理解できないようです。ページがロードされると、ボタンのリストが一意の値で正しくレンダリングされます。ただし、ボタンの1つをクリックすると関数が起動しますが、値は未定義です。私がここで間違っていることを誰かに見せてもらえますか？

パス：TestPage.jsx

import MyList from '../../components/MyList'; 

export default class TestPage extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = {}; 

    this.handleButtonClick = this.handleButtonClick.bind(this); 
    } 

    handleButtonClick(event) { 
    event.preventDefault(); 
    console.log("button click", event.target.value); 
    } 

    render() { 
    return (
     <div> 
     {this.props.lists.map((list) => (
      <div key={list._id}> 
      <MyList 
       listCollection={list} 
       handleButtonClick={this.handleButtonClick} 
      /> 
      </div> 
     ))} 
     </div> 
    ); 
    } 
} 

パス：MyListComponent

const MyList = (props) => (
    <div> 
    <Button onClick={props.handleButtonClick} value={props.listCollection._id}>{props.listCollection.title}</Button> 
    </div> 
); 

Answer 1

event.target.valueが反応コンポーネントの小道具を得ていない、（入力ボックスの内容のような）HTML要素の値を取得するためです。

handleButtonClick(value) { 
    console.log(value); 
} 

<Button onClick={() => props.handleButtonClick(props.listCollection._id)}> 
    {props.listCollection.title} 
</Button> 

Answer 2

それにそのcustomeziedコンポーネント場合..あなたは、デフォルトのボタンが、ボタンという名前の別のlibrayからカスタマイズされたコンポーネントの代わりに、いくつかの並べ替えを使用していないようです：あなただけの価値がまっすぐであること渡された場合に容易になるだろう場合はインターナルにはレンダリングするボタンが含まれているかもしれないが、Buttonコンポーネントを使ってイベントを参照しているときと同じように動作するわけではない