プログラムでTextFieldの値を設定する方法は？

Question

次のコードは、Textfieldのvalue小道具がプログラムによって更新されないことを発見しました。 clear()関数は、Textfiledの値を空の文字列にリセットする必要があります。私は間違って何かしていますか？

render(
 
    <div> 
 
    <IconButton name="clear" className="blue" onClick={() => this.clear()}/> 
 
    <Textfield 
 
      onKeyUp={(e) => this.onKeyUp(e)} 
 
      label="Search Address, city, zip" 
 
      expandable 
 
      expandableIcon="search" 
 
      floatingLabel 
 
      value={this.state.searchText} /> 
 
</div>) 
 

 
onKeyUp(e) { 
 
    const term = e.target.value 
 
    this.setState({ 
 
     searchText: term 
 
    }) 
 
    if (e.keyCode === 13) { 
 
    // do stuff 
 
    } 
 
    } 
 

 
clear() { 
 
    this.setState({ 
 
     searchText: '' 
 
    }) 
 
    }

Answer 1

これは私のために答えよりもコメントのよりはコメントするenought担当者を得たhaventはあります。

私はmaterial-design-liteに精通していません。material-uiを使用した経験があります。マテリアルUIのテキストフィールドコンポーネントには、onChangeメソッドのみが含まれていました。あなたが使用しているライブラリがonKeyUp機能をサポートしていますか？

*編集：あなたはReact-mdlのgithubに問題を投稿していました。 srcファイルを検索し、TextField.jsが見つかりました。このコンポーネントはonKeyUpをサポートしていません。ただし、onChangeを使用することはできます。

これは動作するはずです：

render(
    <div> 
    <IconButton name="clear" className="blue" onClick={() => this.clear()}/> 
    <Textfield 
      onChange={(e) => this.onKeyUp(e)} 
      label="Search Address, city, zip" 
      expandable 
      expandableIcon="search" 
      floatingLabel 
      value={this.state.searchText} /> 
</div>) 

https://github.com/react-mdl/react-mdl/blob/master/src/Textfield.js