Question

我正在使用Github Search API让人们能够在github上搜索存储库。我正在使用React，对所有这些都是新手。我想将输入值传递给AJAX请求，因此它只请求具有特定名称的存储库。有没有办法使用React传递输入值？

 class SearchBox extends React.Component {

constructor(props) {
    super(props);
    this.onKeyUp = this.onKeyUp.bind(this);
    this.onChange = this.onChange.bind(this);
}



render() {
    return(
        <form>
            <input type="text" className="searchbox" onChange={this.onChange} onKeyUp={this.onKeyUp} />
              <ul className="suggestions">
        <li>Filter for a city</li>
        <li>or a state</li>
    </ul>
        </form>
    );
}

  onChange(event) {
        const matchArray = findMatches(this.value, repositories);
const html = matchArray.map(place => {
    const regex = new RegExp(this.value, "gi");
    const cityName = place.city.replace(regex, `<span className="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span className="hl">${this.value}</span>`);
    return `
  <li>
  <span className="name">${cityName}, ${stateName}</span>

  </li>
  `;
}).join('');
console.log(matchArray);


}

onKeyUp(event) {
        const matchArray = findMatches(this.value, repositories);
const html = matchArray.map(place => {
    const regex = new RegExp(this.value, "gi");
    const cityName = place.name.replace(regex, `<span className="hl">${this.value}</span>`);

    return `
  <li>
  <span class="nameName">${cityName}, </span>

  </li>
  `;
}).join('');
console.log(matchArray);


}
}

ReactDOM.render(
<SearchBox />,
document.getElementById("searching")
);

JS

const endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm;
const repositories = [];

fetch(endpoint)
.then(blob => blob.json())
.then(data => repositories.push(...data));

function findMatches(wordToMatch, repositories) {
return repositories.filter(place => {

    const regex = new RegExp(wordToMatch, "gi");
    return place.city.match(regex) || place.state.match(regex);
});
};

因此，您可以看到我想将输入值传递给名为searchTerm的变量。

Answer 1

您可以将ref属性添加到您想要引用的DOM元素中。然后你可以在你的反应组件中引用那个元素。

在您的情况下，您可以将ref添加到搜索框中，如下所示

<input type="text" ref={(input) => { this.searchBox = input; }} className="searchbox" ... />

然后将反应组件中的值称为this.searchBox.value。

请记住，如果您使用react状态来管理应用程序的状态，则需要将获取请求放入组件中。如果您不想这样做，我建议您查看应用的状态管理Flux或Redux。

修改

根据您的评论，我创建了一个codepen来说明如何使用ref属性http://codepen.io/DeividasK/pen/PpZpNL来引用输入字段的值。

将输入值传递给React中的AJAX请求

1 个答案: