Question

我正在尝试为我的应用程序提供搜索功能。它可以与API一起使用：

http://localhost:3005/products?q=[USER INPUT HERE]

和.JSON从此返回。我已经有一个要复制的工作组件，并将其用于搜索结果显示。看起来像这样：

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {},
    url: {}
}

}
componentDidMount() {
    fetch(this.props.url)
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
    }
render() {
    const { general = {name:"", description:""} } = this.state.output;
  return (
    <BoxTitle>{general.name}</BoxTitle>
        );
     }
    }

工作正常，以这种方式呈现：

let ChoosePage = (i) => {
ReactDOM.unmountComponentAtNode(document.getElementById('items'))
let urls = [
    'http://localhost:3005/products/774944', 
    'http://localhost:3005/products/774945', 
    ...
    'http://localhost:3005/products/738471'];
let urls_sliced = urls;
if (i === 0) {
     urls_sliced = urls.slice(0, 4);
 } else if (i === 1) {
     urls_sliced = urls.slice(4, 8);
 } else if (i === 2) {
     urls_sliced = urls.slice(-2);
 }
 let show_items = () => {
    ReactDOM.render(urls_sliced.map((url)=>{
            return(
              <Item url={url}/>
            )
            }), document.getElementById('items'));
        }

        show_items()}

这是我的输入字段：

const search_box = (
<form>
    <Icon>search</Icon>
    <input placeholder={'Search...'}></input>
</form>
);

我正在寻找一种将用户输入的值传递给函数的方法，该函数会将其转换为链接并用于从API获取.JSON，然后呈现与此数据映射的组件。设法做到这一点：

let url_s = 'http://localhost:3005/products?q=' + input; 

let show_results = () => {
ReactDOM.render(urls_sliced.map((url)=>{
        return(
          <Item url={url_s}/>
        )
        }), document.getElementById('items'));
    }

    show_results()

非常感谢您的帮助：）

将输入值传递给组件

0 个答案: