小编Sha*_*ews的帖子

在React中给出了一个提供true/false的prop,如何有条件地将readOnly添加到JSX中的输入字段？

所以,如果我有this.props.boolean,当没有附加this.props.boolean == false readOnly时,添加readOnly的简洁选项,当附加this.props.boolean == true readOnly时.

所以我有一个redux-form组件，它具有一个validate函数，该函数返回Field的值。

const validate = values => {
  const errors = {
    orderHeader: {}
  };

  const orderHeader = values.orderHeader || {};
  if (!orderHeader.orderID) {
    errors.orderHeader.orderID = "Working";
  }
  if (!orderHeader.salesRepID) {
    errors.orderHeader.salesRepID = "Working as well";
  }

  return errors;
}

我试图弄清楚如何使用选择器将所有syncError值返回到将列出所有当前错误的错误清单组件。

我的选择器看起来像这样

const selector = formValueSelector('mainForm')
MainForm = connect(
  state =>
  ({
    syncErrors: getFormSyncErrors('mainForm')(state),
    initialValues: state.account.data,
  }
),
  { load: loadAccount }, // bind account loading action creator
)(MainForm);

记录以下返回未定义...

  render() {
    const { error, handleSubmit, load, pristine, reset, submitting, values, …

我有一个传奇，发布到Web服务并返回新的销售订单编号以进行陈述。效果很好，看起来像这样。

//New SALES NUMBER SAGA
function getNewSalesNumber(salesRepId, typeId) {
  const url = `${baseUrl}/api/SalesOrder/${salesRepId}?typeId=${typeId}`;
  console.log(url);
  return axios.post(url);
}

function* callGetNewSalesNumber({salesRepId, typeId, resolve, reject}) {
  const result = yield call(getNewSalesNumber, salesRepId, typeId)
    if (result.data) {
    yield put({type: "NEWSALESNUMBER_FETCHED", result});
//    yield call(resolve); 
    } else {
//    yield call(reject);
  }
}

function* getNewSalesNumberSaga() {
  yield* takeEvery("FETCH_NEWSALESNUMBER", callGetNewSalesNumber);
}

减速器看起来像这样。

    function newSalesNumber(state = {}, action) {
  switch(action.type) {
    case 'NEWSALESNUMBER_FETCHED':
      return state
        .set("orderHeader.orderId", action.result);
    default:
      return state;
  }
}

export default newSalesNumber;

我试图弄清楚将该值返回到newSalesNumber（现在处于状态）到Field的选项。

如果我是在表单组件中执行此操作，则将使用类似... …

我试图弄清楚如何使用this.props.dispatch(change)以便使用一个字段选择器值来更新 FieldArray 中的另一个字段值。

https://codesandbox.io/s/2p7k7jn930

我似乎无法正确理解此语法。

this.props.dispatch(
        change("FieldArraysForm", `${props.member}.firstName`, this.props.hasLastName)
      );

有什么想法吗？预期的行为是添加一个成员，然后在姓氏字段中键入的任何内容在名字字段中以编程方式更新。

/**
The following can replace the file in the Field Arrays example
(https://github.com/erikras/redux-form/tree/master/examples/fieldArrays) to demonstrate this functionality.
**/
import React from "react";
import { connect } from "react-redux";
import {
  Field,
  FieldArray,
  reduxForm,
  formValueSelector,
  change
} from "redux-form";
import validate from "./validate";

const selector = formValueSelector("fieldArrays");

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} …

我正在尝试根据其中包含值的数组有条件地呈现。所以基本上如果 this.props.data == [] 不渲染。如果 this.props.data == [{data is here}] 渲染。

我尝试过的事情。

如果道具存在

{this.props.data && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然呈现===

空值

{this.props.data != null && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然呈现===

长度

{this.props.data.length > 0 && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===长度未定义===