小编use*_*203的帖子

如何在react-select中设置默认值

我有一个使用react-select的问题.我使用redux形式,我已经使我的react-select组件与redux形式兼容.这是代码:

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
      />
    );
Run Code Online (Sandbox Code Playgroud)

在这里我如何渲染它:

<div className="select-box__container">
                  <Field
                    id="side"
                    name="side"
                    component={SelectInput}
                    options={sideOptions}
                    clearable={false}
                    placeholder="Select Side"
                    selectedValue={label: 'Any', value: 'Any'}
                  />
                </div>
Run Code Online (Sandbox Code Playgroud)

但问题是,我的下拉列表没有我想要的默认值.我做错了什么?有任何想法吗?

default-value reactjs react-select

40
推荐指数
7
解决办法
11万
查看次数

如何自定义Chart.js 2.0 Donut Chart的工具提示?

我正在尝试使用Chart.js2中的圆环图显示一些数据.

我目前的图表如下所示:

目前的图表

我想要的输出必须显示另一个属性,即百分比,如下所示:

所需的图表与百分比

我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手.

我的第一个图表的代码如下:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ] …
Run Code Online (Sandbox Code Playgroud)

javascript customization tooltip chart.js2

22
推荐指数
3
解决办法
5万
查看次数

ESLint不允许进入

我有一个对象

currentValues= {hey:1212, git:1212, nmo:12121}
Run Code Online (Sandbox Code Playgroud)

我用这样的:

for (const key in currentValues) {
    if (Object.prototype.hasOwnProperty.call(currentValues, key)) {
        yield put(setCurrentValue(key, currentValues[key]));
    }
}
Run Code Online (Sandbox Code Playgroud)

ESLint向我显示了一个错误:

ESLint:for..in循环遍历整个原型链,这几乎不是你想要的.使用Object.{keys,values,entries},并迭代生成的数组.(没有限制的语法

我该如何编辑我的代码?

javascript for-in-loop eslint

20
推荐指数
4
解决办法
2万
查看次数

Redux表单中<Field>中的className

我创建了一个redux-form,我想在每个Field中添加className,用css自定义它们.每个字段的代码是:

<Form onSubmit={handleSubmit(requestAccountsFilter)}>
        <FormGroup row>
          <Field
            id="symbol"
            name="symbol"
            type="text"
            component={inputField}
            placeholder="Enter Product Here"
          />
          <Field id="side" name="side" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Buy">Buy</option>
            <option value="Sell">Sell</option>
          </Field>
          <Field id="status" name="status" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Working">Working</option>
            <option value="Completed">Completed</option>
          </Field>
          <Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
        Submit
      </Button>
    </FormGroup>
  </Form>
Run Code Online (Sandbox Code Playgroud)

我添加了一个className标签,但是我看到我添加的占位符都没有显示,也没有显示className.我该如何自定义每个字段?

classname redux redux-form

18
推荐指数
1
解决办法
5281
查看次数

在图表js-2中的反应中添加圆环图中的文本

我想在甜甜圈饼图中添加一条短信.更具体一点,我想要这样的东西: 在此输入图像描述

我在堆栈溢出中遇到了同样的问题,他们在jquery中使用图表js,因为我是javascript的新手,我感到很困惑.这就是我定义饼图的方式:

<Doughnut
            data={sectorsData}
            width={250}
            height={250}
            options={{
              legend: {
                display: false
              },
              maintainAspectRatio: false,
              responsive: true,
              cutoutPercentage: 60
            }}
          />
Run Code Online (Sandbox Code Playgroud)

javascript pie-chart reactjs react-chartjs

8
推荐指数
1
解决办法
6391
查看次数

Redux表单中的DatePicker

我想使用DatePicker使用redux表单选择日期.我创造了这个:

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default field => (
  <div>
    <DatePicker
      onChange={field.value}
      selected={field.value}
      isClearable={true}
    >
      {field.children}
    </DatePicker>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);
<div className="form-group">
        <div className="col-xs-12 col-sm-3 ">
          <div className="label" htmlFor="date-to">DATE TO</div>{' '}
          <Field
            id="date-to"
            name="date-to"
            component={DateInput}
          />
        </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

但它没有返回任何值,并且没有在字段中显示日期我该怎么办?

forms date reactjs redux redux-form

7
推荐指数
1
解决办法
2万
查看次数

提交后清除Redux-Form字段

大家好,我有新的反应和redux,在我的项目中我们没有使用statefull组件,只是无状态的容器.我有一个带有四个字段的redux表单.当我提交表单时,我希望字段清除.我看到有关调度的事情(重置('myForm').我的问题是我必须把它放在哪里?在我的容器中并将它作为道具传递给我的组件?

我的容器是这样的:

const mapDispatchToProps = dispatch => (
  {
    submitOrdersTradesSearch: (formSearchOrdersTradesData) => {
      dispatch(searchOrdersTrades(formSearchOrdersTradesData));
    }
  }
);

const OrdersTradesSearchForm = reduxForm({
  form: 'ordersTradesSearchForm',
})(OrdersTradesSearch);

const OrdersTradesSearchContainer =
  connect(null, mapDispatchToProps)(OrdersTradesSearchForm);

export default OrdersTradesSearchContainer;
Run Code Online (Sandbox Code Playgroud)

submit reset redux-form

7
推荐指数
1
解决办法
1万
查看次数

React 选择需要双击才能折叠

我有反应选择组件,我使其与 redux 形式兼容,如下代码:

const MySelect = props => (
  <div>
    <Select
      {...props}
      value={props.input.value ? props.input.value : 'All'}
      onChange={value => props.input.onChange(value)}
      // onFocus={() => props.input.onFocus(props.input.value)}
      onBlur={() => props.input.onBlur(props.input.value)}
      options={props.options}
      placeholder={props.placeholder}
      selectedValue={props.selectedValue}
    />
    {
      props.meta.touched && props.meta.error &&
      <span className="error">
        { props.intl.formatMessage({ id: props.meta.error }) }
      </span>
    }
  </div>
);
Run Code Online (Sandbox Code Playgroud)

除了一件事之外,它工作正常。需要单击两次才能折叠。为什么会发生这种情况?

javascript reactjs react-select redux-form

7
推荐指数
0
解决办法
1050
查看次数

使用自定义格式输入DatePicker日期

我想使用redux-form在我的州里设置日期.我使用react-datepicker.为了使datepicker与我的redux-form兼容,我写道:

import React, { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

    const MyDatePicker = ({ input, meta: { touched, error } }) => (
      <div>
        <DatePicker
          {...input} dateFormat="YYYY-MM-DD"
          selected={input.value ? moment(input.value) : null}
        />
        {
          touched && error &&
          <span className="error">
            {error}
          </span>
        }
      </div>
    );

    MyDatePicker.propTypes = {
      input: PropTypes.shape().isRequired,
      meta: PropTypes.shape().isRequired
    };

    export default MyDatePicker;
Run Code Online (Sandbox Code Playgroud)

问题是,当我选择日期时,我希望它显示为DD-MM-YYYY,但我希望日期以YYYY-MM-DD HH:MM:SS格式保存在我的州.这该怎么做?我使用时刻的格式功能,但它似乎不起作用

format datepicker momentjs redux-form

6
推荐指数
1
解决办法
1万
查看次数

状态更新后不会重新渲染表组件

我有一个用于显示一些数据的表格组件。分派动作后,状态中的表数据正在发生变化。但是我的表格组件没有更新。它仅在我单击表格另一行中的另一个单选按钮时更新。我希望我的组件在数据更改时重新渲染。这是我的代码:

const mapStateToProps = state => ({
  evaluationData: evaluationResultsSelector(state)
});

const mapDispatchToProps = dispatch => ({
  setSelectedEvaluationRecord: record =>
    dispatch(setSelectedEvaluationRecord(record))
});


export default connect(mapStateToProps,
  mapDispatchToProps
  EvaluationDataTable,  
);
Run Code Online (Sandbox Code Playgroud)

我的组件是这样的:

import React from 'react';
import Table from 'antd/lib/table';
import 'antd/lib/table/style/css';
import "antd/dist/antd.css";
import { columnEvaluation } from './evaluationDataStructure';

class EvaluationDataTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [0], // Check here to configure the default column
    };
  }
  // shouldComponentUpdate(prevProps, prevState) {
  //   return (prevProps.results !== this.props.results || prevState.selectedRowKeys …
Run Code Online (Sandbox Code Playgroud)

javascript state reactjs antd react-props

6
推荐指数
1
解决办法
7281
查看次数