0

Делаю поиск. Для поиска необходимо данные, введенные в окно SearchBar, перенести в url.

  render() {
  return (
      <section className="search-field">
          <h2>Поля</h2>
          <div id="search-bar" className="row">
              <div className="col-md-5">
                  <SearchBar className="form-control" id="searchBar" name="searchBar" ref="search"/>
              </div>
          </div>
      <div>
      </div>

      <div className='row b-list-caret'>
          {this.renderUsersList()}
      </div>
  </section>
 );
}

Присваиваю value вот так:

let queryString = document.getElementsByClassName('form-control').value;
let url = 'http://46.236.137.153/search/field?query=';

console.log( queryString );

Вывожу в консоль для начала чисто ту часть, которую нужно присоединить к url. Консоль выводит "undefined". Что не так?

Код SearchBar:

class SearchBar extends React.Component {

render() {
    return (
        <form id="searchForm" name="searchForm" className="input-group">
            <input type="text"
                   className = "form-control"
                   id = "search-string"
                   ref = "search"
                   defaultValue = "hello"
            />
            <span className="input-group-btn">
                <button className="btn btn-default" type="button">OK</button>
            </span>
        </form>
    )
  }
}
2
  • 1
    let queryString = document.getElementsByClassName('form-control').value - это не правильно. Вы выбираете коллекцию. Какое у нее может быть value? Нужен 1 элемент или обход коллекции в цикле 17 мая 2017 в 6:56
  • document.querySelector('.form-control'), если элемент у вас один такой на странице. Хотя странно что вы пытаетесь делать что-то из вне, а не делаете внутри реакта с его экосистемой 17 мая 2017 в 10:57

2 ответа 2

1

Используйте экосистему React:

class SearchBar extends React.Component {
  constructor() {
    super();

    this.state = {
      queryString: "hello"
    };

    this.handleChanges = this.handleChanges.bind(this);
    this.confirmedQuery = this.confirmedQuery.bind(this);
  }

  handleChanges(event) {
    this.setState({
      queryString: event.target.value
    });
  }
  
  confirmedQuery() {
    const baseUrl = "http://46.236.137.153/search/field";
    const url = `${baseUrl}?query=${this.state.queryString}`;

    const { onChanged } = this.props;
    onChanged && onChanged(url);
  }

  render() {
    const { queryString } = this.state;
    return (
      <form id="searchForm" name="searchForm" className="input-group">
        <input
          type="text"
          className="form-control"
          id="search-string"
          ref="search"
          value={queryString}
          onChange={this.handleChanges}
        />
        <span className="input-group-btn">
          <button className="btn btn-default" type="button" onClick={this.confirmedQuery}>
            OK
          </button>
        </span>
      </form>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();

    this.onChanged = this.onChanged.bind(this);
    this.renderUsersList = this.renderUsersList.bind(this);
  }

  onChanged(url) {
    console.log(url);
  }

  renderUsersList() {}

  render() {
    return (
      <section className="search-field">
        <h2>Поля</h2>
        <div id="search-bar" className="row">
          <div className="col-md-5">
            <SearchBar
              className="form-control"
              id="searchBar"
              name="searchBar"
              ref="search"
              onChanged={this.onChanged}
            />
          </div>
        </div>
        <div className="row b-list-caret">{this.renderUsersList()}</div>
      </section>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1

В вашем случае:

document.getElementsByClassName('form-control').value

getElementsByClassName возвращает HTMLCollection, а collection как вы понимаете это не один элемент это скорее массив из элементов ну или пустой мвссив. У массива нет пропсы value и значит она undefined.

А вообще соглашусь с предыдущим ответом, вам очень не помешало ознакомится с документацией по react и его экосистеме. Что-бы писать хороший код! То что вы сейчас мешаете бульон из react и классического js - это очень плохо!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.