ファンクションによる設定のクリアと状態のクリア

Question

ここで初心者に反応してください（急な学習曲線についてお話します）。

キーワード入力とクリアボタンで単純なコンポーネントを構築しますが、私の状態値がオブジェクトとして記録され続ける理由を理解するのに苦労していますか？

アドバイスは素晴らしいと思います - ありがとう！

` class FacetsFilter extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       facetsKeyword: '' 
      }; 
     } 

     handleOnChange(e) { 
      this.setState({ 
       facetsKeyword: e 
      }); 
      console.log('This is it : ' + e); 
     } 
     handleClearClick(e) { 
      e.preventDefault(); 
      this.setState({ 
       facetsKeyword: '' 
      }); 
     } 

     render() { 
      return (
       <div className="facetsFilter"> 
        <h3 className="facetsTitle title is-5">Refine results</h3> 
        <div className="facetsKeywordFilter columns is-gapless"> 
         <div className="column"> 
          <TextField 
           id="facetsKeywordInput" 
           className="facetsKeywordInput" 
           hintText="Keyword filter" 
           onChange={this.handleOnChange.bind(this)} 
           value={this.state.facetsKeyword} 
          /> 
         </div> 
         <div className="column is-narrow"> 
          <IconButton 
           className="facetsClearButton" 
           tooltip="Clear filter" 
           onClick={this.handleClearClick.bind(this)} > 
           <NavigationClose /> 
          </IconButton> 
         </div> 
        </div> 

        <div className="facetsList body-2"> 
         {facetsList.map((item, index) => (
          <div> 
           <h3 key={index} className="facetsCategoryTitle">{item.category}</h3> 
           <div className="facetListItems"> 
            {item.facets.map((subitem) => (
             <div>{subitem}</div> 
            ))} 
           </div> 
          </div> 
         ))} 
        </div> 
       </div> 
      ); 
     } 
    } 

    export default FacetsFilter;` 

私は単にconsole.logに[Object Object]として返すonChange関数を使用します。

ありがとうございました。

Answer 1

合格パラメータeは、テキストではなくJavaScriptイベントオブジェクトです。したがって、変更されたテキストを取得する場合は、e.target.valueを使用してください。

​​