如何将输入值传递到 API 调用的参数中

Question

我有一个 Header.js 组件，它接收用户的输入并更新其状态。我想将此项目传输（prop？）到父组件 App.js 中，它将作为参数放入其中，并且数据将相对于用户输入记录在控制台中。我不知道如何传输状态并将其实现到 API 的参数中。

class Header extends Component {
  constructor() {
    super();
    this.state = {
      query: '',
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // form's input value
    let userSearch = this.state.query;
  }

  handleChange = (e) => {
    this.setState({
      query: e.target.value
    });
  }

  render() {
    return (
      <header>
        <form onSubmit={this.handleSubmit}>
          <input 
            onChange={this.handleChange} 
            type="text" 
            placeholder="Search"
          />
          <label className="sr-only" htmlFor="search">Search News</label>
        </form>
      </header>
    )
  }
}

export default Header


import Header from './Components/Header'
import axios from 'axios';


class App extends Component {
  constructor() {
    super();
    this.state = {
      articles: [],
    }
  }

  componentDidMount() {
    axios({
      // I want this.state.query in header.js to be {parameter}
      url: 'http://newsapi.org/v2/everything?q={parameter}&sortBy=popularity&apiKey=where-the-key-goes',
      method: 'GET',
      responseType: 'JSON',
    }).then((response => {
      let articles = response.data.articles;
      this.setState({
        articles,
        isLoading: false,
      })

      console.log(articles);
    }))
  }

  render() {
    return (
      <>
        <Header />
      </>
    )
  }
}

export default App

Answer 1

您可以在 App 组件中创建一个回调函数并作为 prop 传递给 Header：

class App extends Component {

  ...

  handleSearch = (value) => {
    axios({
      url: `http://newsapi.org/v2/everything?q=${value}&sortBy=popularity&apiKey=where-the-key-goes`,
      method: "GET",
      responseType: "JSON",
    }).then((response) => { ... });
  };

  render() {
    return (
      <>
        <Header handleSearch={this.handleSearch} />
      </>
    );
  }
}

然后在Header的handleSubmit函数中使用它：

handleSubmit = (e) => {
  e.preventDefault();
  // form's input value
  let userSearch = this.state.query;
  this.props.handleSearch(userSearch);
};

Answer 2

class Header extends Component<Props> { // add Props
    ...
    handleSubmit = (e) => {
        e.preventDefault();
        // form's input value
        let userSearch = this.state.query;
        this.props.onValueSet(userSearch); // callback
    }
    ...
}

class App extends Component {
    ...
    // add callback
    _setValueHandle = (value) => {
        console.log(value);
        this.setState({parameter: value}); // do something u want
    };

    render() {
        return (
            <>
                {/* set callback */}
            <Header onValueSet={this._setValueHandle} />
        </>
    )}
    ...
}

这个怎么样？

Answer 3

您必须添加来自 App.js 的道具。此外，您不需要在 componentDidMount 上调用 api，因为您还需要查询。试试这个：

class Header extends Component {
    static defaultProps = {
        onUpdate: () => {},
        onSubmission: () => {}
    }

    constructor() {
        super();
        this.state = {
            query: '',
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        // form's input value
        let userSearch = this.state.query;
        this.props.onSubmission(this.state.query); //Send submission to parent
    }

    handleChange = (e) => {
        this.setState({
            query: e.target.value
        }, () => {
            this.props.onUpdate(this.state.query); //Send change to parent
        });
    }

    render() {
        return (
            <header>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <input
                        onChange={this.handleChange.bind(this)}
                        type="text"
                        placeholder="Search"
                    />
                    <label className="sr-only" htmlFor="search">Search News</label>
                </form>
            </header>
        )
    }
}

export default Header


import Header from './Components/Header'
import axios from 'axios';


class App extends Component {
    constructor() {
        super();
        this.state = {
            articles: [],
            query: ""
        }
    }

    componentDidMount() {

    }

    request(query){
        axios({
            // I want this.state.query in header.js to be {parameter}
            //NOTE: Query could also be this.state.query since we're updating it on change
            url: 'http://newsapi.org/v2/everything?q={parameter}&sortBy=popularity&apiKey=where-the-key-goes',
            method: 'GET',
            responseType: 'JSON',
        }).then((response => {
            let articles = response.data.articles;
            this.setState({
                articles,
                isLoading: false,
            })

            console.log(articles);
        }))
    }

    render() {
        return (
            <>
                <Header onUpdate={query => this.setState({query: query})} onSubmission={this.request.bind(this)} />
            </>
        )
    }
}

export default App

如何将输入值传递到 API 调用的参数中

How to prop an input value into a parameter for an API call

javascript

state

reactjs

react-props