文章/答案/技术大牛

发布

社区首页 >问答首页 >mui-datatable示例不呈现示例代码。

问mui-datatable示例不呈现示例代码。
EN

Stack Overflow用户

提问于 2020-03-10 04:35:29

回答 1查看 1.1K关注 0票数 0

新的反应和尝试学习MUI-数据。库的码盒上给出的示例代码不会在浏览器中呈现给我，我看到的只是一个空页面。控制台显示零错误。

我的HTML：

<!DOCTYPE html>
    <head>
        <title>MUIDatables Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">        
    </head>
    <body>
            <div id="root"></div>
        </body>
        <script src="Index0.js" type="text/jsx"></script>
</html>

除非指定了“type=”文本/jsx“”，否则控制台中将出现有关CORS和导入语句的错误。我正在使用Node http-request服务器，它确实在当前目录中加载了各种文件。当前，控制台没有显示错误。

联署材料：

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
// other sample data omitted
    ];

    const options = {
      filterType: "dropdown",
      responsive: "scroll"
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

mui-datatable

javascript

reactjs

回答 1

Stack Overflow用户

发布于 2020-03-26 20:40:55

你的密码似乎没问题。只需在末尾包括一行：导出默认应用程序；I复制/粘贴代码并运行它。这张桌子看上去很完美。

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function EditStudentDetails() {
    const [post, setPost] = useState({});
    const id = 1;

    const handleChange = ({target}) => {
        const {name, value} = target;
        setPost({...post, [name]: value});
        console.log(post);
    };

    const handleSubmit = async e => {
        e.preventDefault();

        const editDataById = async () => {
            try {
                const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify({
                        id: id,
                        title: post.title,
                        body: post.body,
                        userId: 1
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })
                    .then(response => response.json())
                    .then(json => console.log(json));
                // latestEdit(response.data);
                console.warn(response.data);
            } catch (error) {
                console.warn(error);
            }
        };
        editDataById();
    };
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-4'>
                    <form onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label htmlFor="name">Title</label>
                            <input type="text" name='title' value={post.title} onChange={handleChange}
                                   className="form-control" id="title"/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="position">Body</label>
                            <input type="text" name='body' value={post.body}
                                   onChange={handleChange} className="form-control" id="body"/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default EditStudentDetails;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60611604

复制

相似问题

问mui-datatable示例不呈现示例代码。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问mui-datatable示例不呈现示例代码。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问mui-datatable示例不呈现示例代码。
EN