Я не могу обновить состояние из другого компонента - PullRequest
Новая
       5

Я не могу обновить состояние из другого компонента

0 голосов
/ 21 апреля 2020

Состояние (открыто) не обновляется с другого компонента с помощью props, единственный способ заставить его работать, это установить время ожидания, но я хочу, чтобы оно закрылось (обновить open свойство ложно) мгновенно. Странно то, что когда он указан в X модальной, если он обновляется (Закрыть). (Все остальное работает отлично)

ProductList.tsx 

class ProductList extends React.Component<IProductListProps, IState> {
  constructor(props: IProductListProps) {
    super(props);
    this.state = {
       index: 0,
       open: false,
       product: undefined
    }
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    const ref: HTMLElement = this.refs['pd-' + 0] as HTMLElement
    if(e.keyCode === 13) {// OPEN MODAL
        this.setState({ 
        ...this.state, open: true, 
        product: this.props.products[ref.dataset.id],
        })
    }
  }

  handleClose() {
        this.setState({
            ...this.state,
            open: false
        })
    }

  render() {
        const { open, product  } = this.state

    return (
      <Container>
        <div>
            <input type="text" name='search' 
              value={...} onChange={...} 
              onKeyDown={this.handleKeyDown} />
        </div>
        <table>
          <tbody>
             {this.props.products.map((x, i) =>
              <tr key={i} data-id={x._id} ref={"pd-" + i}>
                //...item-data
              </tr>
            )} 
          </tbody>
        </table>
        <ModalECP product={product as IDataProduct} open={open} close= 
           {() => this.handleClose()} />
      </Container>
    );
  }
}

ModalECP.tsx 

export default class ModalECP extends React.Component<IProps, IState> {
 constructor(props: IModalECPProps) {
    super(props);
    this.state = { amount: '' }
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }
  handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.keyCode === 13) {
        e.preventDefault()
        const { amount } = this.state
        const { product, close, open } = this.props
        if (Number(amount) > 0 && Number(amount) <= product.stock) {

            // HERE IS THE ERROR *************
            setTimeout(() => close(), 500);     
            // *******************************

            this.setState({ amount: '' })
        }

    }
  }
  render() {
    const { open, close } = this.props  
    return (
        // HERE IT WORKS / UPDATES THE PROPERTY ON
        <Modal show={open} onHide={close} animation={false}>
            <Modal.Header closeButton>
            </Modal.Header>
            <Modal.Body>
                <input type="number" value={...} onChange={...} 
                    onKeyDown={this.handleKeyDown} />
                </Modal.Body>
        </Modal>
    );
  }
}
...