如何在此代码中不设置最后一个表单项目的图标

Question

我正在使用redux-form进行表单验证。在RenderInput内部，我们有许多输入，并且每个输入都有其自己的图标，但是我们需要将字段与date2 Input.name一起使用，而无需图标。我将其设置为无效，未定义，虚假，而不幸的是，其中没有人有效。这是代码：

renderInput({ input, label, type, meta: { touched, error, warning } }) {
    return (
      <Item error={error && touched} style={styles.item}>
<Icon  style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} />
                <Input style={styles.input}
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "card" ? "Card Number": input.name==="date"?"MM":input.name==="date2"?"YY":input.name==="csv"?"CSV": "Name"}
            placeholderTextColor="#0dc49d"
                    secureTextEntry={input.name === "csv" ? true : false}
                    {...input}
                />
            </Item>
    );
  }

最后一个

 <Icon  style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} />

否则我需要它而没有图标。这里使用了未定义的，这也无法正常工作。我如何克服这个挑战？

Answer 1

您可以有条件地渲染图标：

renderInput({ input, label, type, meta: { touched, error, warning } }) {
    const renderIcon = (input.name === "card" || input.name=== "date" || input.name === "csv" || input.name === "name")
    return (
      <Item error={error && touched} style={styles.item}>
                { 
                  renderIcon && 
                  <Icon  style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} /> 
                }
                <Input style={styles.input}
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "card" ? "Card Number": input.name==="date"?"MM":input.name==="date2"?"YY":input.name==="csv"?"CSV": "Name"}
            placeholderTextColor="#0dc49d"
                    secureTextEntry={input.name === "csv" ? true : false}
                    {...input}
                />
            </Item>
    );
  }