javascript - reactjs - 구성 요소에서 동적으로 생성 된 요소 표시/숨기기

Input 의 부모가되도록 상태를 들어 올릴 수 있습니다  상태 및 유효성 검사를 처리합니다.
조건 적으로 surname 의 "유효성 검사기"를 호출 할 수 있습니다.  속성 또는 다른 속성이있는 경우에만 유효하며 validate 메소드의 이름은 다음과 같습니다. propertNameValidator  
예를 들어 입력에 대해 루프를 수행 할 때 surnameValidator 라는 검증 방법  그리고 hidden 에 대해 그것을 호출  당신이 Input 를 통과 소품 존재하지 않는 경우 false 를 전달하십시오. .

여기에 코드가있는 작은 예가 있습니다 :

// Field data
const fieldData = [
  {
    type: "text",
    label: "First",
    name: "first",
    placeholder: "Enter first name",
    hidden: false
  },
  {
    type: "text",
    label: "Surname",
    name: "surname",
    placeholder: "Enter surname",
    hidden: true
  }
];
// Get form data
class FormData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: props.data.map(el => ({...el, value: ''})) // add the value property
    };
  }
  onInputChange = (inputId, value) => {
    const { items } = this.state;
    const nextState = items.map((item) => {
      if (inputId !== item.name) return item;
      return {
        ...item,
        value,
      }
    });
    this.setState({ items: nextState });
  }
  surnameValidator = () => {
    const { items } = this.state;
    const nameElement = items.find(item => item.name === 'first');
    return nameElement && nameElement.value.length >= 5
  }
  render() {
    let els = this.state.items;
    return (
      <div>
        {
          els.map((el, i) => {
            const validator = this[`${el.name}Validator`];
            return (
              <Input
                key={i}
                {...el}
                inputId={el.name}
                hidden={validator ? !validator() : el.hidden}
                onInputChange={this.onInputChange}
              />
            );
          })
        }
      </div>
    )
  }
}
// Input builder
class Input extends React.Component {
  handleChange = ({ target }) => {
    const { inputId, onInputChange } = this.props;
    onInputChange(inputId, target.value);
  }
  render() {
    // Element attributes
    const { type, label, name, placeholder, hidden, value } = this.props;
    return (
      <div>
        {
          hidden ? '' : (
            <div>
              {label ? <label htmlFor={name}>{label}</label> : null}
              <input
                type={type}
                name={name}
                placeholder={placeholder || null}
                value={value}
                onChange={this.handleChange}
              />
            </div>
          )
        }
      </div>
    );
  }
}
// App
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Show/Hide test</h1>
        <p>
          What we want here is the surname to appear when firstname has a value
          (say, it has 5 characters) and hide surname when firstname doesn't.
        </p>
        <FormData data={fieldData} />
      </div>
    );
  }
}
ReactDOM.render(
  <form>
    <App />
  </form>,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

이미 요소를 만들었고 숨기거나 표시하려면 CSS class 를 조건부로 추가하거나 제거 할 수 있습니다.  숨 깁니다.

<input className={`${!isValid && 'hide'}`} />

실수하지 않으면 입력 요소를 조건부로 표시하거나 숨기는 것입니다. 이것이 도움이되는지 확인하십시오.

render() {
      // Element attributes
      const {type, label, name, placeholder, hidden} = this.props.params;
      const isValid = this.state.valid === true ? <span>Valid! Should show Surname field.</span> : <span>Not valid. Should hide Surname field.</span>;
      if (!hidden) {
        return (
        <div>
            {label ? <label htmlFor={name}>{label}</label> : null}
            <input
                type={type}
                name={name}
                placeholder={placeholder || null}
                value={this.state.value}
                onChange={this.handleChange}
            />
            {this.state.valid && <input placeholder="add surname" />}
        </div>
        );
      } else {
        return null;
      }
 }