Печать TextField по нажатию кнопки - печать некорректна

Question

Я пытаюсь включить функцию в свое приложение реагирования, где пользователь вводит поисковый запрос, а когда кнопка нажимается, он начинает поиск. (для ввода текста и кнопок используются компоненты material-ui) Сейчас я просто хочу напечатать термин в журнал консоли, чтобы проверить, все ли в порядке. При запуске приведенного ниже кода, вывод: "[объект объекта]. Кто-нибудь знает, почему это так?

 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>
    );
  }
}

экспорт по умолчанию Поиск

обновление: исправлены опечатки

Answer 1

у вас нет никакой функции, чтобы получить входное значение и установить это значение в состоянии. Попробуй это.

// 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}
                 />

Answer 2

Прямо сейчас вы не вызываете handleClick, просто войдите в консоль. Это означает, что вы ничего не меняете и не устанавливаете для state.searchTerm. Это handleClick, который обновит состояние. Таким образом, значение всегда будет нулевым. Также у вас есть опечатка в ручке. Нажмите:

Ваш параметр говорит "serchTerm" ... он должен сказать "searchTerm". Вы пропустили там;)

Answer 3

Классы используют PascalCase, поскольку они являются компонентами, а не простыми функциями. Компонент Buttons был плохо завершен, и, возможно, вы можете просто вызвать свой обработчик функций, когда пользователь нажимает кнопку, а затем показать состояние на консоли

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

  handleClick = (term) => {

    this.setState({ searchTerm: term });
    console.log(this.state.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={this.handleClick}
         varient ="contained"
         classname="goButton" >
         Enter Query Here!
        </Button>
     </div>
    );
  }
}

Надежда помогает:)

Answer 4

+ searchTem приводит объект в строку, которая в вашем случае равна [object Object]

Просто измените его на:

console.log("search: ", searchTerm)

Подробнее об этом можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/API/console#Outputting_text_to_the_console