홈>
데이터 배열을 가져 오는 컴포넌트 템플릿을 사용하여 양식 필드 요소를 생성하고 있습니다. 이러한 요소 중 일부를 숨기고 다른 요소의 기준이 충족되었을 때 보여줄 수 있기를 원합니다. 이것은 양식 필드에서 상당히 일반적입니다. 항목 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
- 답변 # 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; } }
관련 자료
- javascript - 동적으로 생성되는 스타일링 요소
- html - 자바 스크립트를 사용하여 API에서 캡처 한 동적 생성 요소에 이벤트 리스너 추가
- r - 동적으로 생성 된 반짝이는 UI 요소를 '흐름'으로 만드는 방법
- javascript - reactjs - 이중 입력으로 양식을 동적으로 업데이트
- typescript - 각도 7에서 ngFor에 의해 생성 된 모든 요소에서 트리거 된 이벤트
- typescript - Angular 6에서 select를 사용하여 배열에서 동적으로 생성 된 요소를 표시하고 숨기는 방법
- geojson - 전단지에서 LineString을 동적으로 표시/숨기는 방법
- javascript - 3 개의 요소 다음에 조건부로 행 추가 - reactjs
- javascript - 버튼 클릭 후 HTML 페이지를 위해 동적으로 생성 된 컨텐츠
- reactjs - 동적으로 추가 된 커스텀 데이터 속성의 값을 얻는 방법
- reactjs - 반응 요소를 동적으로 포함 시키려면 어떻게합니까?
- javascript - 라 라벨 - 동적으로 생성 된 양식 필드 제출
- C #에서 동적으로 생성 된 버튼에 대한 keyup 이벤트 추가
- node.js - 인형이 동적으로 생성 된 콘텐츠를 긁을 수 없음
- java - 새로 생성 된 요소가 표시되도록 Selenium에서 DOM 트리를 새로 고치는 방법은 무엇입니까?
- javascript - reactjs에서 'className'을 동적으로 토글하는 방법은 무엇입니까?
- reactjs - redux-form 및 revaldate를 사용하여 반응에서 동적으로 생성 된 양식의 유효성을 검사합니까?
- javascript - 동적으로 생성 된 요소에 초기화 바인딩
- primeng - 전 세계적으로 동적으로 생성 된 각도 6 집합 속성
- javascript - json 문자열에서 ReactJS에 동적으로 DOM 작성
관련 질문
- javascript : REACT onclick 변경 div의 색상
- javascript : 응답 버튼을 출력하고 내 프로젝트에서 정렬할 수 없습니다.
- javascript : 반응: 구성 요소 1 위로 마우스를 가져가면 다른 구성 요소의 스타일을 변경합니다.
- javascript : 응답 텍스트를 HTML화하는 방법
- javascript : React JS에서 map 메소드를 사용하여 배열 데이터를 인쇄하는 방법은 무엇입니까?
- javascript : Safari에서 작동하지 않는 요소 ID에 대한 링크
- javascript : 반응 선택 onChange 값 유형
- javascript : 테이블 셀 및 행에서 div 끌어서 크기 조정을 활성화하는 방법
- javascript : React에서 상태를 다시 부모에게 전달하고 다른 props를 부모에서 자식으로 전달
- javascript : 객체에 선택적 값을 추가하는 더 좋은 방법이 있습니까?
Input
의 부모가되도록 상태를 들어 올릴 수 있습니다 상태 및 유효성 검사를 처리합니다.조건 적으로
surname
의 "유효성 검사기"를 호출 할 수 있습니다. 속성 또는 다른 속성이있는 경우에만 유효하며 validate 메소드의 이름은 다음과 같습니다.propertNameValidator
예를 들어 입력에 대해 루프를 수행 할 때
surnameValidator
라는 검증 방법 그리고hidden
에 대해 그것을 호출 당신이Input
를 통과 소품 존재하지 않는 경우false
를 전달하십시오. .여기에 코드가있는 작은 예가 있습니다 :
이미 요소를 만들었고 숨기거나 표시하려면 CSS
class
를 조건부로 추가하거나 제거 할 수 있습니다. 숨 깁니다.