我在输入的handleChange中使用了两个‘handleChange’，用于搜索数组。为什么搜索是不完整的？

Question

我有一系列城市的名字。另外，我有一个输入，我希望在数组上搜索任何输入值，只要用户输入一个字符，就会根据城市的名称同步地显示输入的占位符，这是用输入值启动的。

是cities.json的一部分：

“阿伯丁”、“阿比利尼”、“阿克伦”、“奥尔巴尼”、“阿尔伯克基”、“亚历山大”、“阿伦敦”、“阿马里洛”、“阿纳海姆”、“安克雷奇”、“安·阿博尔”、“安提阿”、“苹果谷”、“阿普尔顿”、“阿灵顿”、“阿尔瓦达”、“阿什维尔”、“雅典”、“亚特兰大”、“大西洋城”、“奥古斯塔”、“奥古斯塔”、“奥斯丁”、“奥斯汀”、“贝克斯菲尔德”、“巴尔的摩”、“巴恩斯泰斯特”、“巴吞鲁日”，“博蒙特”，。。。。。。。。。。。。。。“威尔明顿”、“温斯顿”、“冬季港湾”、“伍斯特”、“亚基马”、“扬克斯”、“约克”、“扬斯敦”

index.jsx:

import React from "react";
import ReactDOM from "react-dom";
import cities from "./cities.json"; //cities is an array.

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            placeholder: ''
        }
    }

    handleChange = (e) => {
        this.setState({
            value: e.target.value
        });
        for (let i = 0; i < cities.length; i++){
            if (cities[i].startsWith(`${this.state.value}`)){
                return this.setState({
                    placeholder: cities[i]
                });
            }
        }
    }


    render() {
        return (
            <div>
                <input value={this.state.value} placeholder={this.state.placeholder} onChange={this.handleChange}/>
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

但有两个问题：

1-使用两个setState:做第一个setState的第二个setState使用结果吗？

2-不期望输出：类型值与占位符值不同步。占位符在清除输入时显示(占位符也必须是空的)。此外，它只显示第一个城市，与任何起首字母。例如，如果我键入"Akro“或"Alba"，它将显示”阿伯丁“而不是"Akron”和"Albany"，作为占位符。此外，如果我键入"Baton"，它将显示"Bakersfield“而不是"Baton”(注意数组)。

my输出：

​

​

预期输出：

​

​

你的解决方案是什么？)

Answer 1

setState函数是异步的，所以如果您想使用新的状态，就必须提供对setState的回调，并在其中使用新的状态。因此，例如，在您的情况下，您必须执行如下操作：

​

handleChange = (e) => {
    this.setState(
      {
        value: e.target.value
      },
      () => {
        if (this.state.value) {
            for (let i = 0; i < cities.length; i++) {
                if (cities[i].startsWith(this.state.value)) {
                    return this.setState({
                        placeholder: cities[i]
                    });
                }
            }
        }
        return this.setState({ placeholder: ''})
      }
    );
  };

​

为了正确显示占位符，需要在呈现中执行以下更改：

​

render() {
    return (
      <div style={{ position: "relative" }}>
        <input value={this.state.value} style={{ fontFamily: 'Arial', fontSize: 14 }} onChange={this.handleChange} />
        <span style={{ position: "absolute", top: 0, left: 0, padding: '3px 4px', fontSize: 14, fontFamily: 'Arial', opacity: 0.5 }}>
          {this.state.placeholder}
        </span>
      </div>
    );
  }

​

Answer 2

@Marco是正确的，但根据您的问题，您希望看到城市的建议。@Arman占位符只有在输入框中没有值时才会显示。但是您可以使用html中提供的datalist。请找到工作解决方案这里的链接。

import React from "react";
import cities from "./cities.json"; //cities is an array.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      placeholder: "",
      suggestions: []
    };
  }

  handleChange = (e) => {
    this.setState(
      {
    value: e.target.value
      },
      () => {
    this.setState(
      {
        suggestions: []
      },
      () => {
        for (let i = 0; i < cities.length; i++) {
          if (cities[i].startsWith(`${this.state.value}`)) {
            this.setState({
              suggestions: [...this.state.suggestions, cities[i]]
            });
          }
        }
      }
    );
      }
    );
  };

  render() {
    return (
      <div>
    <label htmlFor="city">Choose your city:</label>
    <input
      value={this.state.value}
      placeholder={this.state.placeholder}
      onChange={this.handleChange}
      list="suggested_cities"
      name="city"
      id="city"
    />
    <datalist id="suggested_cities">
      {this.state.suggestions.map((suggestion) => {
        return <option value={suggestion} key={suggestion} />;
      })}
    </datalist>
      </div>
    );
  }
}

export default App;

链接到小提琴的工作示例。https://codesandbox.io/s/react-fiddle-forked-viqmt?from-embed