react PropTypes 전달 값 검사 예제
전 달 된 값 검사:
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:[' ',' '],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
inputValue:e.target.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
render() {
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.change.bind(this)}/>
<button onClick={this.addList.bind(this)}> </button>
</div>
<ul>
{
this.state.list.map((v,i)=>{
return(
<List key={i} content={v} index={i} delete={this.delete.bind(this)} />
);
})
}
</ul>
</Fragment>
);
}
}
export default Test;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
render() {
return (
<li
onClick={this.delete}
>{this.props.name}{this.props.content}</li>
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
//
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
// :
List.defaultProps={
name:' '
}
export default List;
본 고 에서 말 한 것 이 여러분 의 react 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react:^16.4.1 webpack:^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.