>

데이터 배열을 가져 오는 컴포넌트 템플릿을 사용하여 양식 필드 요소를 생성하고 있습니다. 이러한 요소 중 일부를 숨기고 다른 요소의 기준이 충족되었을 때 보여줄 수 있기를 원합니다. 이것은 양식 필드에서 상당히 일반적입니다. 항목 A를 선택하면 양식 필드 X가 나타나고 항목 B를 선택하면 양식 필드 X가 숨겨집니다.

React docs 사이트에서 조건부 렌더링 에 대해 약간의 내용을 읽었습니다. 그러나 이러한 예제는 렌더링에서 구성 요소 방지 섹션이 가깝지만 실제로하고있는 작업에는 효과가 없습니다.

저는 코드 펜을 만들었습니다 . 는 첫 번째 필드의 기준이 충족되면 두 번째 필드를 표시합니다 (이 예에서는 첫 번째 필드에 5자를 입력해야 함). 초기 숨기기를 설정하기 위해 소품을 통과했지만 어떻게 특정 숨겨진 요소를 찾아서 숨기기를 해제 할 수 있습니까?

// 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
      };
    }
    render() {
      let els = this.state.items;
      return els.map((el, i) => {
          return <Input key={i} params={el} />
      });
    }
  }
  // Input builder
  class Input extends React.Component {
      constructor(props) {
          super(props);
          // Keep state value
          this.state = {
              value: '',
              valid: false,
              hidden: this.props.params.hidden
          };
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange(e) {
          this.setState({
              value: e.target.value,
              valid: e.target.value.length < 5 ? false : true
          });
      }
      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}
                />
                {isValid}
            </div>
            );
          } else {
            return null;
          }
      }
  }
  // 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')
  );


  • 답변 # 1

    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'}`} />
    
    

  • 답변 # 2

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

    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;
          }
     }
    
    

관련 자료

  • 이전 asp.net mvc - txt 파일에서 인증 속성 체계를 설정하는 방법은 무엇입니까?
  • 다음 C # RegEx 및 사전을 사용하여"전체 단어 만"대체