Question

这是组件：

import React from 'react';
const ContactCard = ({contact, onFormSubmit}) => {

    this.state = {modal: 'block'};

    const handleSubmit = (e) => {
        onFormSubmit(contact);
    };

    const showModal = (e) => {
        if (this.state.modal === 'block') {
            this.state.modal = 'none';
        } else {
            this.state.modal = 'block';
        }
        console.log(this.state.modal);
    };

    return (
        <div>
            <input type="checkbox" onClick={handleSubmit} />
            <div>
                <button onClick={showModal}>Open Modal</button>
                <div style={ { display: this.state.modal } }>
                    <h2>The text</h2>
                </div>
            </div>
            <div className="clearfix"></div>
        </div >
    )
}

export default ContactCard;

发生的事情是，当我单击按钮时，showModal被触发，这是正确的。但是style={{display: this.state.modal}}不会更改为block或none。怎么了？

Answer 1

要更新状态时，请使用setState方法，切勿直接将状态设置为this.state.something == ...。所以，

const showModal = e => {
  if (this.state.modal === "block") {
    this.setState({ modal: "none" });
  } else {
    this.setState({ modal: "block" });
  }
};

此外，因为它是异步的，所以不要像这样立即记录您的状态。您看不到这样的更新状态。 setState有一个回调函数，但是您可以轻松地将状态记录在render方法中。

render(){
    console.log( this.state.modal );
    return( ... );
}

我没有第一次发现您购买的组件是可以正常使用的组件，因此您不能在那里使用this.state。只需将其定义为一类即可。

class ContactCard extends React.Component {
  state = { modal: "block" };

  showModal = () => {
    if ( this.state.modal === "block" ) {
      this.setState({ modal: "none" });
    } else {
      this.setState({ modal: "block" });
    }
  };

  render() {
    console.log( this.state.modal );
    return (
      <div>
        <div>
          <button onClick={this.showModal}>Open Modal</button>
          <div style={{ display: this.state.modal }}>
            <h2>The text</h2>
          </div>
        </div>
        <div className="clearfix" />
      </div>
    );
  }
}

export default ContactCard;

Answer 2

您已经创建了一个功能组件。功能组件无权访问状态。

我建议您从第4部分到第5部分阅读本指南：https://reactjs.org/docs/components-and-props.html

第二个问题是您试图通过分配直接设置状态。

this.state.modal === 'block' . // Incorrect

您应该改用this.setState({ modal: 'block' })。

Answer 3

好吧 1.）react中的数据以状态存储，该状态只能在基于类的组件中访问，请确保每当您在组件中需要状态时，都应使该组件基于类。 2）永远不要直接改变状态，使用setState方法。 3.）切勿直接更改数组和对象，因为它们是引用类型。

Answer 4

由于您正在访问状态并对其进行修改，因此您需要更改功能组件以响应类组件，如下所示。此外，您还需要修改状态并执行此操作，您需要使用setState以便呈现更新的值。 seState是一种修改状态值的方法，无论何时执行setState，组件都会为每个setState渲染一次。

如果您像这样修改状态。state.modal='block';它不会显示修改后的值，因此不建议

import React from 'react';
class ContactCard extends React.Component{

constructor(props){
   super(props);
   this.state = {modal: 'block'}
}

showModal = e => {
    const { modal } = this.state;
    if (modal == 'block') {
        this.setState({modal: 'none'}, ()=> {
            console.log(modal);//this will print none here
        });

    } else {
        this.setState({modal : 'block'}, () => {
            console.log(modal);//this will print block here
        });
    }
};

render(){
 const { modal } = this.state;
 return (
    <div>
        <div>
            <button onClick={this.showModal}>Open Modal</button>
            <div style={ { display: modal } }>
                <h2>The text</h2>
            </div>
        </div>
        <div className="clearfix"></div>
    </div >
  )
 }
}

  export default ContactCard;

反应：状态不触发返回

4 个答案: