我有一个使用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)
但问题是,我的下拉列表没有我想要的默认值.我做错了什么?有任何想法吗?
我正在尝试使用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) 我有一个对象
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},并迭代生成的数组.(没有限制的语法
我该如何编辑我的代码?
我创建了一个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.我该如何自定义每个字段?
我想在甜甜圈饼图中添加一条短信.更具体一点,我想要这样的东西:
我在堆栈溢出中遇到了同样的问题,他们在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) 我想使用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)
但它没有返回任何值,并且没有在字段中显示日期我该怎么办?
大家好,我有新的反应和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) 我有反应选择组件,我使其与 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)
除了一件事之外,它工作正常。需要单击两次才能折叠。为什么会发生这种情况?
我想使用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格式保存在我的州.这该怎么做?我使用时刻的格式功能,但它似乎不起作用
我有一个用于显示一些数据的表格组件。分派动作后,状态中的表数据正在发生变化。但是我的表格组件没有更新。它仅在我单击表格另一行中的另一个单选按钮时更新。我希望我的组件在数据更改时重新渲染。这是我的代码:
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 ×5
reactjs ×5
redux-form ×5
react-select ×2
redux ×2
antd ×1
chart.js2 ×1
classname ×1
date ×1
datepicker ×1
eslint ×1
for-in-loop ×1
format ×1
forms ×1
momentjs ×1
pie-chart ×1
react-props ×1
reset ×1
state ×1
submit ×1
tooltip ×1