小编Umb*_*bro的帖子

我使用图书馆：https://www.npmjs.com/package/react-tooltip。我有一个太长的文本，它在一行上，如何将它放在多行上？

<p data-tip="hello world">Tooltip</p>
<ReactTooltip className="tooltip"/>

.tooltip {
  width: 100px;
}

我有loadProfile我想调用的函数useEffect。如果在loadProfile内调用该函数useEffect，则名称Mario应显示在输入name字段内。如何antd在输入库中设置默认值？我尝试使用，defaultValue但输入字段仍为空。

这里的例子：https : //stackblitz.com/edit/react-311hn1

const App = () => {

    const [values, setValues] = useState({
        role: '',
        name: '',
        email: '',
        password: '',
        buttonText: 'Submit'
    });

    useEffect(() => {
        loadProfile();
    }, []);

    const loadProfile = () => { 
        setValues({...values, role, name="Mario", email});
    }

    const {role, name, email, buttonText} = values;



    const updateForm = () => (
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
                name: …

我想以秒为单位转换格式示例“ 00：30：00”。这是我的方式。有没有办法在“模板字符串”中添加这些值？

预期效果：

convert1000（'00：30：00'）-> 1800

convert1000（'00：00：10'）-> 10

convert1000（'00：08：10'）-> 490

convert1000（'01：01：10'）-> 3670

const convert1000 = (time) => {
    const [hour, minute, sec] = time.split(':');

    if (hour !== "00") {
      return `${(hour* 3600)} + ${(minute * 60)} + ${(sec)}`;
    }

    if (minute !== "00") {
      return `${minute * 60} + ${sec} `;
    }

    return `${sec} `;
  }

My goal is to call the setEditing () function in the Todo component. I have created a keyboard shortcut:

const keyMap = {
   TEST: "t"
}; 

const handlers = {
    TEST: () => this.setEditing()
};

const MyHotKeysComponent = withHotKeys (Todo, {keyMap, handlers});

<MyHotKeysComponent>
   <p> press t </p>
</ MyHotKeysComponent>  

In which part of the Todo component do you place these elements?

Code here: https://stackblitz.com/edit/react-cjkf1d?file=index.js

import {  withHotKeys } from "react-hotkeys";

class EditForm extends React.Component {
  render() {
    return (
      <div> …

如何在 React Big Calendar 中获取第一个和最后一个可见日期？这将有助于数据库查询以查看事件。我正在尝试调用该onNavigate ()函数并获取start和end使用该moment库，但两个值都是undefined.

更新

我得到了开始的价值。仅当我按下返回、下一个箭头时才结束。日历出现时如何自动获取这些值？

class App extends Component {
  constructor() {
    super();
    this.state = {
      current_date: '',
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 3, 0),
          end: new Date(2019, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
        }
      ]
    };  
  }


onNavigate =(date, view) => { …

我有一个现成的分页组件：https : //www.npmjs.com/package/react-js-pagination

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1,
      todos: []
    };
  }

  handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }

  render() {
    return (
      <div>
        <Pagination
          activePage={this.state.activePage}
          totalItemsCount={this.state.todos.length}
          pageRangeDisplayed={2}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

如何将分页从分页转换react-js-pagination为https://react-bootstrap.github.io/components/pagination/ ？react-bootstrap

在纯粹的反应中，我编写了一个调用的函数componentDidMount ()：

  getTasks = (userId, query, statusTask, pageNumber) => {
    let check = {};
    axios({
      url: `/api/v1/beta/${userId}`,
      method: 'GET'
    })
      .then(res => {
        check = res.data;

        if (res.data) {
          this.setState({
            checkRunning: res.data,
            checkRunningId: res.data.id
          });
          this.utilizeTimes(res.data.task_id);
        }
      })
      .catch(error => {
        console.log(error);
      })
      .then(() => {
        const params = {
          sort: 'name'
        };

        if (query) {
          params['filter[qwp]'] = query;
          if (this.state.tasks[0]) {
            this.setState({
              selectedId: this.state.tasks[0].id,
              selectedTabId: this.state.tasks[0].id
            });
          }
        }

        axios({
          url: '/api/v1//tasks',
          method: 'GET',
          params
        })
          .then(res …

我react-create-app用来构建我的 chrome 扩展。当我npm run build在 react-create-app 中使用时出现错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”。启用内联执行需要“unsafe-inline”关键字、散列（“sha256-5='）或随机数（“nonce-...”）。

错误 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the …

尝试使用创建待办事项列表react-infinite-scroller。该列表将显示20个待办事项，滚动时将显示下一个待办事项。我从' https://jsonplaceholder.typicode.com/todos ' 获取Todos 。提取的待办事项保存在todos变量中。

我已经为这个示例建模：https : //github.com/CassetteRocks/react-infinite-scroller/blob/master/docs/src/index.js。

这里演示：https://cassetterocks.github.io/react-infinite-scroller/demo/。

我看不到Loading..出现并获取其他任务。

代码在这里：https : //stackblitz.com/edit/react-tcm9o2?file=index.js

import InfiniteScroll from 'react-infinite-scroller';
import qwest from 'qwest';

class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      todos: [],
      hasMoreTodos: true,
      nextHref: null
    }
  }

  loadTodos(page){
     var self = this;
    const url = 'https://jsonplaceholder.typicode.com/todos';

    if(this.state.nextHref) {
      url = this.state.nextHref;
    }

    qwest.get(url, {
      linked_partitioning: 1,
      page_size: 10
    }, {
      cache: true
    })
    .then((xhr, resp) …

我正在使用react-select图书馆https://react-select.com/home#getting-started。试图将选择减少到维度width: 90px; height: 23px。但是，当您单击它时，选择增加。如何设置上述参数，使 select 有一个 cay 时间width: 90px; height: 23px？

演示在这里：https : //stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS

.css-2b097c-container {
  width: 90px; …