Скрыть компонент, изменяющий его состояние.

Question

Я создал компонент, который пытаюсь изменить его состояние при нажатии кнопки, но я не знаю, почему я не получаю это изменение ... Мой компонент использует Button, что это другой компонентПоэтому, когда я нажимаю на этот Button, мне нужно изменить состояние компонента PopUp (который я хочу скрыть) и удалить его из пользовательского интерфейса.

Это мой Button компонент, но я не могу ни изменить его, ни изменить его ... поэтому я должен изменить новый

const MyButton = connect(
  undefined,
  (dispatch, { name, surname, arguments: args = [] }) => ({
    onClick: () => dispatch(myButton(name, surname, args)),
  }),
)(Button)

export default MyButton

Итак, и редуктор

export const MY_BUTTON = "MY_BUTTON"
export const myButton = (name, surname, args) => ({
  type: MY_BUTTON,
  name,
  surname,
  arguments: args,
})

Хорошо, и теперь всплывающее окноКомпонент, который я хочу сделать:

export default class PopUp extends React.Component {
  state = { hidden: false }

  handleClick = value => {
    this.setState({ hidden: true })
  }

  render() {
    let { name } = this.props
    if (this.state.hidden) {
      return null
    }

    return (
      <div className="modal-wrapper">
        <div className="modal">
          SomeText
          <br />
          <MyButton
            name={name}
            surname="example1"
            arguments={["yes"]}
            onClick={() => this.handleClick("yes")}
          >
            [ Yes ]
          </MyButton>{" "}
          <MyButton
            name={name}
            surname="example2"
            arguments={["no"]}
            onClick={() => this.handleClick("no")}
          >
            [ No ]
          </MyButton>{" "}
        </div>
      </div>
    )
  }
}

, так почему бы не закрыть всплывающее окно, когда я нажимаю Да или Нет?

Я создаю Component следующим образом:

{showPopUp && <PopUp name={name} />}

Один парень сказал мне, что я могу создать onClick внутри div и внутри этого div создать кнопки, чтобы я обнаружил дваonClick, это возможно?

Answer 1

Если вы хотите скрыть компонент, просто попробуйте это:

export default class PopUp extends React.Component {
  state = { 
     hidden: false,
  }

handleClick = () => {
 this.setState({ 
   hidden: true,
 })
}
render() {
  const { name } = this.props;
  const { hidden } = this.state;

 return (
  <div className="modal-wrapper">
  { !hidden  && 
    <div className="modal">
      SomeText
      <br />
      <MyButton
        name={name}
        surname="example1"
        arguments={["yes"]}
        onClick={() => this.handleClick}
      >
        [ Yes ]
      </MyButton>{" "}

      <MyButton
        name={name}
        surname="example2"
        arguments={["no"]}
        onClick={() => this.handleClick}
      >
      [ No ]
      </MyButton>{" "}
    </div>
  }
  </div>
)
}
}

И еще попробуйте диспетчер рефакторинга следующим образом:

const mapDispatchToProps = dispatch => ({
  dispathMethod: (name, surname, args) => dispatch(name, surname, args)), 
})

//if you are using selector use it:

const mapStateToProps = createStructuredSelector({
  accessories: selectSomething(),
});


const withConnect = connect(
 //here(1st param)if selecter using put ? mapStateToProps : null 
  mapDispatchToProps,
);

export default compose(
  null,
  withConnect,
)(Button);