Question

使用示例here构建反应模式。显示一组无线电，并处理选择。我第一次选择列表并点击保存时工作正常。当我重新打开模态时，选择新列表时不会调用handleOptionChange。知道我做错了吗？

class ListsDialog extends React.Component {
  constructor(...args) {
    super(...args);
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleOptionChange = this.handleOptionChange.bind(this);
    this.state = { showModal: false };
  }

  handleClose() {
    console.log("Changing list to " + this.state.selectedList);
    this.props.actions.changeList(this.state.selectedList);
    this.setState({ showModal: false });
  }

  handleShow() {
    this.setState({ showModal: true });
  }

  handleOptionChange(changeEvent) {
    console.log("Selected option " + changeEvent.target.value);
    this.setState({
      selectedList: changeEvent.target.value
    })
  }

  renderList(list) {
    let radioId = "list-radio-" + list.id;
    let checked = list.id == this.props.listId ? "checked" : "";
    return(<div key={list.id} className="form-check">
             <input className="form-check-input" type="radio" name="exmampleRadio" id={radioId} value={list.id}
                    defaultChecked="{checked}" onChange={this.handleOptionChange}/>
             <label className="form-check-label" htmlFor={radioId}>{list.name}</label>
           </div>);
  }

  render() {
    return(
      <div id="lists-modal" className="modal fade" tabIndex="-1" role="dialog">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title">Switch List</h4>
            </div>
            <div className="modal-body list-list">
              {this.props.lists.map(list => this.renderList(list))}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" className="btn btn-primary save" data-dismiss="modal" onClick={this.handleClose}>Save changes</button>
            </div>
          </div>
        </div>
      </div>);
  }
}

export default ListsDialog;

Answer 1

很抱歉，事实证明我的代码不是基于该示例，而是我的纯引导程序，当我重新创建它时，对话框有效。

React Bootstrap Modal在第二次使用时失败

1 个答案: