Question

我有消息发送形式，可以与节点服务器上的工作后端进行反应。当我发送消息时，我会收到警报（我从axios教程中获得了警报）。看来这很幸运：

axios({
  /* here sending data */
}).then((response)=>{
    if (response.data.msg === 'success') {
        alert("Message sent successfully.");
    }
});

现在我想在DOM的我的react-app页面上以div在发送形式下显示“消息已成功发送”，或在页面上显示为弹出窗口。如何最轻松地做到这一点？

Answer 1

您可以使用alert代替setState将消息置于组件状态并在render方法中使用。

示例

function axios() {
  return new Promise(resolve =>
    setTimeout(() => {
      resolve({ data: { msg: "success" } });
    }, 1000)
  );
}

class App extends React.Component {
  state = { message: "Loading..." };

  componentDidMount() {
    axios({
      /* sending data goes here */
    }).then(response => {
      if (response.data.msg === "success") {
        this.setState({ message: "Message sent successfully." });
      }
    });
  }

  render() {
    return <div> {this.state.message} </div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

将axios警报消息解析为React DOM

1 个答案: