홈>
데이터 배열을 가져 오는 컴포넌트 템플릿을 사용하여 양식 필드 요소를 생성하고 있습니다. 이러한 요소 중 일부를 숨기고 다른 요소의 기준이 충족되었을 때 보여줄 수 있기를 원합니다. 이것은 양식 필드에서 상당히 일반적입니다. 항목 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 - 다른 결과를 얻는 필터링 된 데이터 인쇄
- javascript - 콜백 내에서 React Hook "useState"를 호출 할 수 없습니다
- javascript - 캔버스 모양의 원을 만드는 방법?
- javascript - jquery 부드러운 스크롤 및 오류 메시지 후 입력 페이지 중간에 정렬
- javascript - react link 및 react route - 페이지를 지우려고하지만 대신 추가가 발생합니까? 엄청 이상해
- javascript - 스타일 및 스크립트 태그는 HTML의 어느 태그에
- javascript - 개체 값 변경
- javascript - 반응 후크를 실행하기 전에 500 밀리 초를 기다립니다
- javascript - 특정 시간대로 UTC 시간 변환 시도
- javascript - for 루프가 작동하지 않거나 문제를 일으키는 다른 이유가 무엇입니까?
Input
의 부모가되도록 상태를 들어 올릴 수 있습니다 상태 및 유효성 검사를 처리합니다.조건 적으로
surname
의 "유효성 검사기"를 호출 할 수 있습니다. 속성 또는 다른 속성이있는 경우에만 유효하며 validate 메소드의 이름은 다음과 같습니다.propertNameValidator
예를 들어 입력에 대해 루프를 수행 할 때
surnameValidator
라는 검증 방법 그리고hidden
에 대해 그것을 호출 당신이Input
를 통과 소품 존재하지 않는 경우false
를 전달하십시오. .여기에 코드가있는 작은 예가 있습니다 :
이미 요소를 만들었고 숨기거나 표시하려면 CSS
class
를 조건부로 추가하거나 제거 할 수 있습니다. 숨 깁니다.