Javascript 父组件中的复选框不会在React.js中的子组件中激发函数

在我的父组件中，我有四个复选框，基本上我希望每个复选框都显示我在子组件中创建的函数中的值，如果选中或不选中

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      weatherFromInput: null,
      dataTracker: null,
      isChecked: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    console.dir(dataTracker);
  }

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

  handleCheckboxChange(event) {
    console.log('checkbox changed!', event);
    this.setState({ isChecked: event.target.checked });
  }

  handleSubmit(event) {
    event.preventDefault();
    var mode = function mode(arr) {
      return arr.reduce(
        function(current, item) {
          var val = (current.numMapping[item] = (current.numMapping[item] || 0) + 1);
          if (val > current.greatestFreq) {
            current.greatestFreq = val;
            current.mode = item;
          }
          return current;
        },
        { mode: null, greatestFreq: -Infinity, numMapping: {} },
        arr
      ).mode;
    };
    var promises = Promise.all([api.getWeather(this.state.input), api.getForecast(this.state.input)]);

    promises.then(
      function(input) {
        var firstSevenDays = input[1].list.slice(0, 7);
        var tempertures = firstSevenDays.map(function(day) {
          return Math.floor(day.main.temp);
        });
        var dataObj = new dataTracker(
          input[0].main.temp_min,
          input[0].main.temp_max,
          input[0].main.temp_min + input[0].main.temp_max / 2,
          mode(tempertures)
        );
        this.setState({ weatherFromInput: input[0], input: '', dataTracker: dataObj });
      }.bind(this)
    );
  }

  render() {
    return (
      <div className="container">
        <div className="container">
          <form name="weatherApp" onSubmit={this.handleSubmit}>
            <h2>Open Weather App</h2>
            <div className="row">
              <div className="one-half column">
                <label htmlFor="insertMode">Insert your location</label>
                <input
                  name="zipcode"
                  className="u-full-width"
                  placeholder="please enter city or zipcode"
                  type="text"
                  autoComplete="off"
                  value={this.state.input}
                  onChange={this.handleChange}
                />
              </div>
              <div className="one-half column">
                <label htmlFor="showMin">show minimum</label>
                <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} />
                <label htmlFor="showMax">show maximum</label>
                <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} />
                <label htmlFor="showMean">show mean</label>
                <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} />
                <label htmlFor="showMean">show mode</label>
                <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} />
              </div>
            </div>
            <div className="row">
              <div className="two-half column">
                <input type="submit" value="Submit" />
              </div>
            </div>
          </form>
        </div>

        <div className="container">
          <div className="row">
            <div className="twelve columns">
              {this.state.weatherFromInput !== null ? (
                <WeatherDisplay dataTracker={this.state.dataTracker} weather={this.state.weatherFromInput} />
              ) : null}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这是我的子组件：

export default function WeatherDisplay(props) {
  var { weather, dataTracker } = props;
  console.log('dataTracker', dataTracker);

  return (
    <div className="weather-display">
      <h1>{weather.name}</h1>
      <h2>{`Current temperature: ${Math.floor(weather.main.temp)}`}</h2>
      <h3>{`Current humidity: ${weather.main.humidity}%`}</h3>
      <h4>{`Minimum temperature: ${dataTracker.showMin()}%`}</h4>
      <h4>{`Maximum temperature: ${dataTracker.showMax()}%`}</h4>
      <h4>{`Mean temperature: ${dataTracker.showMean()}%`}</h4>
      <h4>{`Mode temperature: ${dataTracker.showMode()}%`}</h4>

    </div>
  );
}

---

如何将它们连接在一起？

为了实现您的目标，您必须执行以下操作：

将标识符id属性、名称属性添加到每个复选框中 将isChecked状态更改为checkedItems数组 将onChange逻辑更改为 handleCheckboxChangeevent{ const target=event.target； const id=target.id；//或target.getAttribute'name'； const isChecked=target.checked； const{checkedItems}=this.state； //项目未选中 如果！我检查过了{ //将其从列表中删除 const updateItems=checkedItems.filteritem=>item！==id； //更新状态 this.setState{checkedItems:updatedItems}； //中断 回来 } //添加新项目 const updateItems=checkedItems.concatid； //更新状态 this.setState{checkedItems:updatedItems}；

---

}您有4个复选框，但在您的状态中只存储一个选中的引用。单独存储并作为道具发送到WeatherDisplay组件。@user3210641谢谢！那么这是否意味着我也必须为每个复选框创建一个处理程序？@user3210641我有一个handleChange方法。我怎样才能让它知道应该更改哪些相应的状态属性？请查看我刚刚发布的答案。谢谢！属性上是否同时需要id和“名称”？可以选择一个或使用任何数据属性。它仅用于标识复选框。如果它解决了您的问题供将来参考，请不要忘记将其标记为正确答案。非常感谢，您让我能够使用复选框显示和隐藏信息。你建议我用答案更新问题吗？