Redux 表单 - CSS 更改一次但不触发新更改

Question

我想形成一个用户，如果他填写了输入权或不依赖于某种验证方法。现在我刚刚实施了 isRequired.

如果正确（绿色）或不正确（红色），我可以在第一个 touched 之后添加一个符号。但是，例如，如果我更正输入，我的图标不会从红色变为绿色。

InputItem.js

import React from 'react';

const InputItem = ({ spec, input, meta: { touched, error } }) => {

  const successIconRight = {
    color: '#2ecc71'
  };

  const errorIconRight = {
    color: '#e74c3c'
  };

  const { label, type, placeholder, iconLeft, iconRight } = spec;

const renderIcon = () => {

  if (touched && error) {
    return (
      <span className="icon is-small is-right">
        {/* <i className="fas fa-ban" style={errorIconRight} /> */}
        <span style={errorIconRight}>NON</span>
      </span>
    )
  } else if (touched && !error) {
    return (
      <span className="icon is-small is-right">
        {/* <i className={iconRight} style={successIconRight} /> */}
        <span style={successIconRight}>OUI</span>
      </span>
    )
  }
}

  return (
    <div className="field">
      {label && <label className="label">{label}</label>}
      <p className="control has-icons-left has-icons-right">
        <input
          {...input}
          className="input"
          type={type}
          placeholder={placeholder}
        />
        <span className="icon is-small is-left">
          <i className={iconLeft} />
        </span>
        <span className="icon is-small is-right">
          { renderIcon() }
        </span>
      </p>
    </div>
  );
};

export default InputItem;

编辑： 尝试使用 redux-form 示例代码和我的代码，我发现如果我尝试渲染除 icone <i ... /> 之外的其他东西，它就可以工作。在这里，我使用 <span> 编辑了我的代码片段，它正在运行。但是如果你取消注释 icone 并注释 span 它不能正常工作......我不知道为什么。

Answer 1

可能是这样的情况，条件返回的两个元素相似并且 React 出于某种原因未检测到虚拟 DOM 中的更改，因此不会重新呈现。如果是这种情况，您可能会尝试将其中一个图标包装到一个空的 span 中，以确保在条件更改时更改 DOM 或者您可以尝试为它们分配不同的键（<i className={iconRight} style={successIconRight} key={1}/> 例如）。尽管我不确定这是否可行，但 React 使用键跟踪其内部表示。

Redux 表单 - CSS 更改一次但不触发新更改

Redux Form - CSS change once but not trigger new change

validation

reactjs

redux

redux-form