Question

使用Meteor 1.3和React，我做了以下主要内容：

//imports
export default class Show extends TrackerReact(Component) {

  renderOptions() {
    return this.options().map((option) => (
      <Option key={ option._id } option={ option }/>
    ));
  }

  options() {
    return Options.find({}).fetch();
  }

  render() {
    return (
      <div className="container">
        <ul>
          { this.renderOptions() }
        </ul>
      </div>
    );
  }
}

我有以下Option组件：

export default class Option extends Component {

  constructor(props) {
    super(props);

    this.state = {
      disabled: false
    };
  }

  vote() {
    this.setState({ disabled: true });
  }

  renderButton() {
    return this.state.disabled ? 'btn btn-success' : 'btn btn-default';
  }

  render() {
    return (
      <li>
        <button disabled={ this.state.disabled ? 'disabled' : '' } type="button" className={this.renderButton()} onClick={this.vote.bind(this)}>
          Vote
        </button>
        <span> { this.props.option.text }</span>
      </li>
    );
  }
}

Option.PropTypes = {
  option: PropTypes.object.isRequired
};

当我在vote()组件呈现的任何一个选项上单击按钮（调用组件的Show方法）时每个disabled状态的true状态如何实现按钮设置为disabled？基本上，我正在渲染一些按钮供用户点击，一旦他点击一个，我想要禁用所有其他按钮。因此，我需要在点击一个按钮时将所有按钮的状态设置为public virtual ICollection<Team> Teams{ get; set; }。

Answer 1

这更像是一个React问题，而不是Meteor问题，但你需要做的是在你的父组件中声明你的函数，然后将它作为prop传递给你的子组件。然后在您的子组件中，您可以使用this.props.funcName调用该函数。

因此，在您的示例中，您需要声明Show组件中的状态（如果它影响其他组件，则更高），然后传递更新父组件中状态的函数。然后，此状态将作为道具传递给您的Option组件。

如果不清楚，请告诉我

Meteor React修改多个组件的状态

1 个答案: