通过函数反应设置和清除状态

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 onChange函数，它作为[对象对象]返回简单usure。

谢谢你的任何建议。

Answer 1

传递参数e不是文本而是javascript事件对象。因此，如果您想要更改文字，请使用e.target.value。

​​