Question

如果他填写了输入权或者没有使用某种验证方法，我想组建一个用户。现在我刚刚实施了isRequired。

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

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

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

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

1 个答案: