Question

我想要一个添加按钮。以下是React.js代码，我认为这是实现我想要的逻辑的一种方式，但不幸的是它不起作用。

我收到此错误：

bundle.js:47 Uncaught Error: Cannot find module "./src/index.js"
    at webpackMissingModule     at Object.<anonymous> 
    at __webpack_require__

如何解决这个问题？

import React from "react"
import ReactDOM from "react-dom"
import SearchBar from "./components/search_bar"

const API_KEY = "TheRealAPIKeyWouldGoHere"
const App = () => {

  handleChange(value){
     this.setState({
      value: event.target.value
    });
  }
  return ( <div>
  <SearchBar onChange={this.handleChange}/>

  </div>
 )
}

ReactDOM.render(<App />, document.querySelector(".container"))

这是我的组件。我已将Button分配给输入，但我无法弄清楚如何使其工作。

import React, { Component } from "react"

class SearchBar extends Component {
  constructor(props){
    super(props)
    this.state = {term: ""}
  }
  handleChange(evt){
    this.props.onChange(value);
  }

  render () {
    return <div>
    <button onClick={this.handleChange}>Search</button>
    <input ref="inputName" onChange= { event =>       console.log(event.target.value)} />
          </div>

  }
}
export default SearchBar

Answer 1

在您的组件中：

import React, { Component } from "react"

class SearchBar extends Component {
  constructor(props) {
    super(props)
    this.state = { term: '' }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({ value: event.target.term })
  }

  handleSubmit(event) {
    console.log(event.target.value)
    event.preventDefault()
  }

  render() {
    return (
      <div>
        <button onClick={this.handleSubmit}>Search</button>
        <input
          type="text"
          value={this.state.term}
          onClick={this.handleChange}
        />
      </div>
    )
  }
}
export default SearchBar

如何让Button在输入上工作（REACT）

1 个答案: