子组件和父组件之间如何实时传值 ，我做一个多选框，点击查询以后，子组件的选项消失

在React中，父子组件之间的实时传值通常通过props和状态(state)来实现。假设你有一个包含多选框的子组件`MultiSelectBox`，它接收一个`options`数组作为props，并允许用户选择其中的项。当用户点击查询按钮后，你可以这样做：

**子组件 MultiSelectBox.js**

import React, { useState } from 'react';

const MultiSelectBox = ({ options, onQuery }) => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleSelectionChange = (e) => {
    // 当用户选择新的选项
    const newSelected = e.target.value;
    setSelectedOptions([...selectedOptions, newSelected]);
    // 点击查询后传递给父组件
    if (onQuery) onQuery(selectedOptions);
  };

  return (
    <div>
      {/* 多选框... */}
      <select onChange={handleSelectionChange}>
        {options.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
      {/* 查询按钮... */}
    </div>
  );
};

export default MultiSelectBox;

**父组件 ParentComponent.js**

import React, { useState } from 'react';
import MultiSelectBox from './MultiSelectBox';

const ParentComponent = () => {
  const [queryResult, setQueryResult] = useState([]);

  const handleQuery = (newOptions) => {
    // 这里处理查询逻辑，然后更新查询结果
    // ...实际查询操作...
    setQueryResult(newOptions);
  };

  return (
    <div>
      <MultiSelectBox options={initialOptions} onQuery={handleQuery} />
      {/* 显示查询后的结果 */}
      {queryResult.length > 0 && <p>已查询到的结果: {queryResult.join(', ')}</p>}
    </div>
  );
};

export default ParentComponent;

在这个例子中，当你点击查询按钮时，`handleQuery`会被调用并将当前的选择传给父组件，父组件可以基于这个信息更新自己的状态并显示相应的内容。