Question

我需要在Reactjs中创建一个菜单，并使用redux调用API来显示数据。现在我想在菜单中创建一个搜索框来显示特定类别。我尝试过使用refs，但它没有用。我想它已被弃用了。

class App extends Component {
  constructor(props){
  super(props);
  this.state = { datas: []}//props.menu_items 
}

componentWillMount() {
 this.setState({
  datas : require('./sample2')
 });
}

render() {
 return (
  <div className="App">
    <h2>Menu Dashboard</h2>
    <Buttons />
    <div style={{ border:'1px solid 
  #E7E7E7',marginTop:'3%',width:'90%',marginLeft:'5%'}}>
     <Filters />
     <DisplayTable datas={this.state.datas}/>
    </div>
  </div>
   )
  }
  }
  class Buttons extends Component {
   constructor(props){
   super(props);
   // this.state = {searchInput: ''};
   this.search = this.search.bind(this);
  }
  search(event){
   if (event.keyCode === 13) {  
   // this.setState({searchInput: event.target.value});
   console.log(this.refs.searchInput.value);
   event.preventDefault();
   }
  }
  render() {
    return (
     <div>
     <button className="button1">Categories</button>
     <button className="button2">Add Ons</button>
     <FormControl type="text" placeholder="search items"  ref="searchInput"  
     className="search " onKeyDown={this.search} />
     </div>
    )
   }
  }

我应该如何访问搜索框中输入的值，以便我可以根据它显示数据？另外，我想通过按Enter来调用搜索功能。我已经尝试了上述代码。提前谢谢。

Answer 1

您可以尝试以下代码，我使用搜索项目的名称，您可以用它替换searchInput。对于redux动作搜索，您需要创建一个搜索操作，您可以调用api并将该数据存储到道具中。

import React from "react";
import {connect} from "react-redux";
import {SearchItems} from "../actions/SearchAction";

/**
 * Search Item Class
 */
class Search extends React.Component {
  /**
   * Constructor
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    }
  }

  /**
   * Set the search text data into the state object
   * @param event
   */
  searchByText = (event) => {
    this.state[event.target.name] = event.target.value;
    this.props.SearchItems(this.state);
  }

  /**
   * Render the Search filter options.
   * @returns {XML}
   */
  render() {
    return (
       <div className="col-md-8 pull-left">
              <div className="form-group form-control-by-1">
                <input type="text" className="form-control-search search-input-box" id="name" name="name" value={this.state.name} onChange={(e) => this.searchByText(e)} placeholder="Search "/>
              </div>
            </div>
    );
  }
}

/**
 * Call the Search action function with search data.
 * @param dispatch
 * @returns {{SearchItems: (function(*=))}}
 */
const mapDispatchToProps = (dispatch) => {
  return {
    SearchItems: (inputData) => {
      dispatch(SearchItems(inputData));
    }
  };
};


/**
 * attach  both Reducer and Action into the Search component.
 */
export default connect(mapDispatchToProps)(Search);

Answer 2

ref searchInput是FormControl组件的引用，而不是输入组件的引用。 FormControl未将输入值存储在其引用中。

相反，将onChange处理程序传递给FormControl组件并将输入值存储在您的状态中，如下所示：

onChange = e => {
  this.setState({ value: e.target.value })
}

并将search功能修改为：

  search = e => {
    if (e.keyCode === 13) {
      console.log('this.state.value..', this.state.value)
    }
  }

像这样呈现你的FormControl：

<FormControl value={this.state.value} type="text" placeholder="search items" 
                   className="search " onChange={this.onChange} onKeyDown={this.search} />

Answer 3

根据文档，当您使用道具名称FormControl传递时，ref会为input元素分配inputRef。此外，React文档建议使用回调approch for refs over string refs。

有关详细信息，请参阅此答案：

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

所以你可以分配ref并得到像

这样的值

class Buttons extends Component {
   constructor(props){
   super(props);
   // this.state = {searchInput: ''};
   this.search = this.search.bind(this);
  }
  search(event){
   if (event.keyCode === 13) {  
   console.log(this.searchInput.value);
   event.preventDefault();
   }
  }
  render() {
    return (
     <div>
     <button className="button1">Categories</button>
     <button className="button2">Add Ons</button>
     <FormControl type="text" placeholder="search items"  inputRef={(ref) => {this.searchInput=ref}}  
     className="search " onKeyDown={this.search} />
     </div>
    )
   }
  }

在输入框中输入的访问值作出反应

3 个答案: