ボタンクリック時にTextFieldを印刷-正しく印刷されない

debugcn 投稿 Dev

ウシエビラ

ユーザーが検索語を入力し、ボタンを押すと検索する機能をReactアプリに組み込んでみようとしています。（テキスト入力とボタンはmaterial-uiコンポーネントを使用しています）今のところ、用語をコンソールログに出力して、問題がないことを確認します。以下のコードを実行すると、出力は次のようになります。 "[object Object]。その理由を誰かが知っていますか？

 import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';

class searchText extends React.Component {
  state = {
    searchTerm: null,
  }

  handleClick = (searchTerm) => {
    this.setState({ searchTerm });
  }

  render() {
    const { searchTerm } = this.state;

    return (
      <div className ="Search">
        <TextField 
          id = "outlined-search"
          label="Enter Query"
          type = "search"
          className ="Search"
          variant="filled"
          value = {searchTerm}
         />

        <Button
         onClick={() =>{console.log("search: " +{searchTerm}); }}
         varient ="contained"
         classname="goButton" >
         Enter Query Here!
        <Button/>
     </div>
    );
  }
}

デフォルトの検索をエクスポート

更新：タイプミスを修正

Muhazzib UD-din Farooqui

入力値を取得してその値を状態に設定する関数はありません。これを試して。

// function for TextField Value Change
    getvalue=(event)=>{
        this.setState({
          searchTerm:event.target.value
        })
    }
// function for button click
    handleClick = () => {
        console.log(this.state.searchTerm)
    }

                <TextField 
                  id = "outlined-search"
                  label="Enter Query"
                  type = "search"
                  className ="Search"
                  variant="filled"
                  value = {this.state.searchTerm}
                  onChange={this.getvalue}
                 />

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]