xxx

exercise4/src/App.js

@@ -1,25 +1,26 @@
-import logo from './logo.svg';
+import React from 'react'
-import './App.css';
+import Confirm from './components/index'
-
+class App extends React.Component {
-function App() {
+  constructor(){
+    super()
+  }
+  del(){
+    Confirm("确定要删除吗",[
+      {text:"cancel",onpress:()=>{
+        console.log("点击了取消按钮")
+      }},{
+        text:"sure",onpress:()=>{
+          console.log("点击了确定按钮!")
+        }
+      }
+    ])
+  }
+  render(){
     return (
-    <div className="App">
+      <div>
-      <header className="App-header">
+        <button onClick={this.del.bind(this)}>confirm</button>
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
       </div>
-  );
+    )
+  }
 }
-
 export default App;

exercise4/src/components/confirm.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import './style.css'
+class Confirm extends React.Component{
+    constructor(){
+        super()
+        this.state={
+            text:'xxxxxxx',
+            btnOptions:[]
+        }
+    }
+    setMessage(title,btnOptions,el){
+        this.div=el;
+        this.setState({text:title,btnOptions:btnOptions})
+    }
+    clickBtn(index){
+        if(this.state.btnOptions[index].onpress){
+            this.state.btnOptions[index].onpress();
+        }
+        document.body.removeChild(this.div);
+    }
+    render(){
+        return(
+            <div className="confirmContainer">
+                <li className="title">{this.state.text}</li>
+                {/* <ul className="handle">
+                    {this.state.btnOptions.length>0 && this.state.btnOptions.map((item,index)=>{
+                        return (
+                            <li className="btn" 
+                            key={index}
+                            onClick={this.clickBtn.bind(this,index)}
+                            >{item.text}</li>
+                        )
+                    })}
+                </ul> */}
+                <ul className="handle">
+                    {this.state.btnOptions.length>0 && this.state.btnOptions.map((item,index)=>{
+                        return (
+                            <li className="btn" 
+                            key={index}
+                            onClick={item.onpress}
+                            >{item.text}</li>
+                        )
+                    })}
+                </ul>
+            </div>
+        )
+    }
+}
+export default Confirm

exercise4/src/components/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDom from 'react-dom';
+import ConfirmDom from './confirm'
+export default function(title,btnOptions){
+    let div=document.createElement('div');
+    document.body.appendChild(div);
+    let confirmInt=ReactDom.render(<ConfirmDom></ConfirmDom>,div);
+    confirmInt.setMessage(title,btnOptions,div)
+
+}

project/p10/src/components/confirm/index.js

@@ -1,10 +1,10 @@
 import React from "react";
-import ReactDom from "react-dom";
+import ReactDOM from 'react-dom';
 import Hehe from "./confirm.js";
 export default function (ops, btn) {
   let div = document.createElement("div");
   document.body.appendChild(div);
-  let toastInt = ReactDom.render(<Hehe />, div);
+  let toastInt = ReactDOM.render(<Hehe />, div);
   toastInt.setMessage(ops, btn, div);
   console.log(btn);
 }