reactjs - 从 React 中的 API 过滤数组数据时，如何在表单提交中使用startsWith？

Question

抱歉这个菜鸟问题，刚从 React 开始。因此，我的页面使用此组件从 API 访问格式化为数组的县列表：

class FetchRandomCounty extends React.Component {
  state = {
    loading: true,
    county: null,
  };

  async componentDidMount() {
    const url = "http://localhost:5000/api/counties";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ county: data, loading: false });
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.county ? (
          <div> loading... </div>
        ) : (
          <div>
            <div>
              {" "}
              {this.state.county
                .filter((item) => item.startsWith("J"))
                .map((item) => (
                  <li key={item}>{item}</li>
                ))}{" "}
            </div>
          </div>
        )}
      </div>
    );
  }
}

获取的数据是一个如下所示的数组：

["Aransas", "Austin", "Bastrop", "Bee", "Brazoria", "Burleson", "Caldwell", "Calhoun", "Chambers", "Colorado", "Comal", "De Witt", "Fayette", "Fort Bend", "Galveston", "Goliad", "Gonzales", "Grimes", "Guadalupe", "Hardin", "Harris", "Jackson", "Jasper", "Jefferson", "Jim Wells"]

目前的输出是这样的：

• 杰克逊
• 碧玉
• 杰斐逊
• 吉姆·威尔斯

如何提示用户输入字母并过滤数组以仅显示以该字母开头的数据？现在我正在使用item.startsWith('J'))并想让它响应用户输入。这是我的用户输入组件：

class LetterForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert("A letter was submitted: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          StartsWith:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 1

如果您想保留FetchRandomCounty并LetterForm作为单独的组件，您可以使用道具控制所选字母FetchRandomCounty并从父级控制它，并引入一个onChange回调道具，用于LetterForm更改存储在父级中的所选字母。

例子

const data = [
  "Aransas",
  "Austin",
  "Bastrop",
  "Bee",
  "Brazoria",
  "Burleson",
  "Caldwell",
  "Calhoun",
  "Chambers",
  "Colorado",
  "Comal",
  "De Witt",
  "Fayette",
  "Fort Bend",
  "Galveston",
  "Goliad",
  "Gonzales",
  "Grimes",
  "Guadalupe",
  "Hardin",
  "Harris",
  "Jackson",
  "Jasper",
  "Jefferson",
  "Jim Wells"
];

class FetchRandomCounty extends React.Component {
  state = {
    loading: true,
    county: null
  };

  componentDidMount() {
    // const url = "http://localhost:5000/api/counties";
    // const response = await fetch(url);
    // const data = await response.json();
    this.setState({ county: data, loading: false });
  }

  render() {
    const { loading, county } = this.state;
    const selectedLetter = this.props.selectedLetter.toLowerCase();

    return (
      <div>
        {loading || !county ? (
          <div> loading... </div>
        ) : (
          <div>
            <div>
              {county
                .filter((item) => item.toLowerCase().startsWith(selectedLetter))
                .map((item) => (
                  <li key={item}>{item}</li>
                ))}
            </div>
          </div>
        )}
      </div>
    );
  }
}

class LetterForm extends React.Component {
  state = { value: "" };

  handleChange = (event) => {
    this.setState({ value: event.target.value.slice(0, 1) });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.onChange(this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          StartsWith:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}


class App extends React.Component {
  state = { selectedLetter: "J" };

  updateLetter = (selectedLetter) => {
    this.setState({ selectedLetter });
  };

  render() {
    return (
      <div>
        <FetchRandomCounty selectedLetter={this.state.selectedLetter} />
        <LetterForm onChange={this.updateLetter} />
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>