javascript - 我需要使用一个处理程序处理不同的输入 onChange 方法

Question

我正在做一个做一点网络抓取的组件，我的问题是我希望用户输入城市和他们正在寻找的类别，并将这些参数传递给 uri 并根据情况获得响应它。我的问题是，我在所有输入的handleChange函数之前已经做了很多次，但是当我在其中任何一个上输入时，它不允许我输入，输入保持空白...我已经检查并比较了其他组件，这些组件是正在工作，但我没有看到错误，

这是组件 Profesionals.jsx:

class Profesionals extends PureComponent {
  constructor() {
    super();

    this.state = {
      companyNames: [],
      telephones: [],
      category: "",
      city: "",
      isSearched: false
    };
  }

  handleChange(e) {
    const value = e.target.value;
    this.setState({
      ...this.state,
      [e.target.name]: value
    });
    console.log(this.state);
  }

  render() {
    const { isSearched, companyNames, telephones, city, category } = this.state;
    return (
      <div className="offset-2  col-4">
        <div class="form-group">
          <label class="col-form-label">Ciudad:</label>
          <input
            type="text"
            class="form-control"
            value={city}
            name="city"
            onchange={this.handleChange}
          ></input>
          <label class="col-form-label">Categoria:</label>
          <input
            type="text"
            class="form-control"
            value={category}
            name="category"
            onChange={this.handleChange}
          ></input>

          <button
            type="button"
            class="btn btn-secondary mt-2"
            onclikc={this.init}
          >
            Enviar
          </button>
        </div>

        {isSearched && (
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Company Name</th>
                <th scope="col">Telephone</th>
              </tr>
            </thead>
            {companyNames.map((name, index) => (
              <tbody>
                <tr class="table-active" key={index}>
                  <td>{name}</td>
                  <td>{telephones[index]}</td>
                </tr>
              </tbody>
            ))}
          </table>
        )}
      </div>
    );
  }
}

export default Profesionals;

这是我在控制台中得到的输出:

Profesionals.js:61 Uncaught TypeError: Cannot read property 'setState' of undefined
    at handleChange (Profesionals.js:61)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
    at executeDispatch (react-dom.development.js:584)
    at executeDispatchesInOrder (react-dom.development.js:609)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.development.js:692)
    at runEventsInBatch (react-dom.development.js:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js:880)
    at handleTopLevel (react-dom.development.js:5803)
    at batchedEventUpdates$1 (react-dom.development.js:24401)
    at batchedEventUpdates (react-dom.development.js:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5894)
    at attemptToDispatchEvent (react-dom.development.js:6010)
    at dispatchEvent (react-dom.development.js:5914)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at discreteUpdates$1 (react-dom.development.js:24417)
    at discreteUpdates (react-dom.development.js:1438)
    at dispatchDiscreteEvent (react-dom.development.js:5881)

Answer 1

您应该设置name支持<input>元素。这就是你的setState的方式可以使用多个元素。

this.setState({
  [e.target.name]: e.target.value, // name equals DOM name attribute
});