使用ReactJS构建的个人名片构造器

选择头像、名字和年龄，自动创建出个人档案卡片。头像来自randomuser开放服务。

react, profile, card

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1632
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var random = Math.floor((Math.random() * 100) + 1);

var dataArray = [{
	img: '0',
	gender: 'men',
	name: 'John',
	age: '45',
	key: uniqueKey()
}, {
	img: '1',
	gender: 'women',
	name: 'Mary',
	age: '50',
	key: uniqueKey()
}, {
	img: '2',
	gender: 'men',
	name: 'Paul',
	age: '45',
	key: uniqueKey()
}
];
class AddModule extends React.Component {
	constructor(props) {
		super(props);
	
		this.state = {
			img: 15,
			gender: "men",
			name: "",
			age: "",
			button: 'fab disabled',
			key: "",
			selectedOption: "men",	
			women: 1
		}
	}

addPersona(e) {
		e.preventDefault();
		
		this.refs.inputName.focus();
		var img = this.state.img;
		var name = this.state.name;
		var age = this.state.age;
		var gender = this.state.gender;
		
		if (!name || !age) {
			return;
		}
		var newObject = {
			gender: this.state.gender,
			img: this.state.img,
			name: this.state.name,
			age: this.state.age,
			key: uniqueKey()
		}
		this.props.addPersona(newObject);
		this.setState({
			name: "",
			age: "",
			button: 'fab disabled'
		})
	}
	handleOptionChange(e){
		this.setState({
    selectedOption: e.target.value,
			gender: e.target.value
  });
	}
	handleAvatarChange(e){
		this.refs.inputName.focus();
	this.setState({
		img: e.target.value
	});
	}
	
	handleChange(data, e) {
		var name = this.refs.inputName.value;
		var age = this.refs.inputAge.value;
		
		var change = {};
		change[data] = e.target.value;
		if (!name || !age) {
			this.setState({
				button: 'fab disabled'
			})
		} else {
			this.setState({
				button: 'fab enabled'
			})
		}
		this.setState(change);

}
	
	render() {
		var avatars = [];
	
		for (var i=7; i<15; i++){
		
			avatars.push(
				<label>
					<input type="radio" id={i} value={i} name="avatars" className="avatar__input" onChange={this.handleAvatarChange.bind(this)}/>
					<img src= {'https://randomuser.me/api/portraits/' + this.state.selectedOption + '/' + i + '.jpg'} alt="avatar" className="avatar" />
					</label>
			);
		}
		return (
			<form className="form" onSubmit={this.addPersona.bind(this)}>
				<h1>Persona Builder</h1>
								<div className="radio-container">
			<label className="gender">
				<input type="radio" id="men" name="gender" checked={this.state.selectedOption==="men"} value="men" onChange={this.handleOptionChange.bind(this)}/>
				<span>Male</span>
					</label>
				<label className="gender">
				<input type="radio" id="women" value="women" name="gender" checked={this.state.selectedOption==="women"} onChange={this.handleOptionChange.bind(this)}/>
					<span>Female</span>
					</label>
				</div>
					  <ul className="avatar__wrapper">
						<li className="avatar__container">
  			<label>
					<input defaultChecked type="radio" id={i} value={i} name="avatars" className="avatar__input" onChange={this.handleAvatarChange.bind(this)}/>
					<img src= {'https://randomuser.me/api/portraits/' + this.state.selectedOption + '/' + i + '.jpg'} alt="avatar" className="avatar" />
					</label>   
						</li>
						{avatars.map(function(avatars, index){
                    return <li className="avatar__container">
											{avatars}
									
										</li>;
                  })}
							
            </ul>
			
				<input type="text" ref="inputName" className="input" placeholder="Name"  value={this.state.name} onChange={this.handleChange.bind(this, 'name')}/>
					<input type="number" className="input" ref="inputAge" placeholder="Age" value={this.state.age} onChange={this.handleChange.bind(this, 'age')}/>

<button type="submit" className={this.state.button}>+</button>
			</form>
		)
	}
}

class Persona extends React.Component {
constructor(props) {
		super(props);
		this.state = {
			id: this.props.data.id,
			img: this.props.data.img,
			gender: this.props.data.gender,
			womenCount: 1
		}
	}
	deletePersona(){
	
		var newObject = {
			gender: this.state.gender
		}
this.props.deletePersona(newObject);
	}
	render() {
		return (
			<div>
				<ul>
				<li className="card__list avatar--image">
				<img src={'https://randomuser.me/api/portraits/' + this.state.gender + '/' + this.state.img + '.jpg'}/>
				</li>
				<li className="card__list text--primary">{this.props.data.name}</li>
				<li className="card__list text--small">{this.props.data.age}</li>
					
			</ul>
					<button type="button" 
								className="close" 
								
								onClick={this.deletePersona.bind(this)}>&times;
							</button>
			</div>
		)
	}
}
function uniqueKey() {
  const guid = s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();

return guid;
}

function s4() {
  return Math.floor((1 + Math.random()) * 0x10000)
    .toString(16)
    .substring(1);
}

class Parent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			data: this.props.data,
			womenCount: 1,
			menCount: 2,
			totalUsers: 3
		}
	}
	addPersona(newObject) {
		if (newObject.gender =="women"){
		//this.state.womenCount +=1;
			this.setState({
				womenCount: this.state.womenCount+=1,
				totalUsers: this.state.totalUsers+=1
			})
		}
		else {
			//this.state.menCount +=1;
			this.setState({
				menCount: this.state.menCount+=1,
				totalUsers: this.state.totalUsers+=1
			})
		}
		
		var list = this.state.data;
		var newList = list.slice();
		newList.unshift(newObject);
		this.setState({
			data: newList
		})
	}
	deletePersona(i, newObject) {

var list = this.state.data;
		var newList = list.slice();
		newList.splice(i,1);

if (newObject.gender =="women"){
		this.setState({
			data: newList,
			womenCount: this.state.womenCount -1,
			totalUsers: this.state.totalUsers-1
		})
		}
		else {
			this.setState({
			data: newList,
			menCount: this.state.menCount -1,
				totalUsers: this.state.totalUsers-1
		})
		}
		
	}
	render() {
	
	   var items = this.state.data.map(function(data, i) {
      return (
				<div className="card__container" key={data.key}>
	<div className="card__content">
        <Persona data={data} deletePersona = {this.deletePersona.bind(this, i)}/>
				
					</div>
					</div>
      );
    }.bind(this));	
	return (
      <div className="wrapper">
       <AddModule 
				array={dataArray}
				addPersona = {this.addPersona.bind(this)}
				/>
			       <ReactCSSTransitionGroup transitionName="example"
					transitionAppear={true} className="card__wrapper">
   <div className="tally">
		 <h1 className="app-title"><span className="number-primary">{this.state.totalUsers}</span>User{this.state.totalUsers ==1 ? "" : "s"}</h1>
		
		 
		 
		 <div className="category"> Women:<span className="focus">{this.state.womenCount}</span></div>
		<div className="category"> Men:<span className="focus">{this.state.menCount}</span>
			</div>    
			</div>
					{items}
					
        </ReactCSSTransitionGroup>
			
      </div>
    );
	
	
	}
}

ReactDOM.render(<Parent data={dataArray} />, document.getElementById('app'));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
* {
    box-sizing: border-box;
}
html {
    height: 100%;
    width: 100%;
}
body {
    background-color: #eaeef7;
    font-family: 'Lato';
    margin: 0;
    height: 100%;
    width: 100%;
}
ul {
    -webkit-padding-start: 0;
    list-style: none;
    margin: 0;
}
h1,
h2,
h3,
h4 {
    font-weight: normal;
    display: table;
}
.card__wrapper {
    padding: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 275px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.card__container {
    -webkit-flex-basis: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    min-width: 200px;
    position: relative;
    padding: 15px 10px;
}
.card__content {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.card__list {
    list-style: none;
}
.fab {
    border-radius: 100%;
    border: 0 none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    color: #fff;
    font-size: 1rem;
    background-color: #2faeff;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    bottom: 30px;
    right: 30px;
    margin-top: 20px;
    outline: none;
}
.fab:hover {
    background-color: #0099fb;
    box-shadow: 0 3px 10px rgba(47, 174, 255, 0.5);
}
input {
    background-color: transparent;
    border: 0 none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: .8rem;
    font-weight: 100;
    margin-bottom: 25px;
    padding-bottom: 10px;
    width: 100%;
    outline: none;
    -webkit-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out;
    -webkit-appearance: none;
}
input:focus {
    border-color: #2faeff;
}
.input {
    border-radius: 0;
}
.text--primary {
    font-size: 1.2rem;
    padding: 10px;
    text-align: center;
}
.text--small {
    font-size: .8rem;
    color: #777;
    font-weight: 100;
    padding: 0 20px 50px;
    text-align: center;
}
.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
.form {
    background-color: #001d2f;
    padding: 20px;
    width: 275px;
    position: fixed;
    height: 100%;
}
.close {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.5rem;
    border: 0 none;
    background-color: transparent;
    outline: none;
    color: rgba(255, 0, 0, 0.4);
    padding: 10px 15px;
    cursor: pointer;
}
.close:hover {
    color: rgba(255, 0, 0, 0.7);
}
.disabled {
    opacity: .3;
    cursor: default;
}
.disabled:hover {
    background-color: #2faeff;
    box-shadow: none;
}
.example-enter {
    opacity: 0.01;
}
.example-enter.example-enter-active {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.example-leave {
    opacity: 1;
}
.example-leave.example-leave-active {
    opacity: 0.01;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.example-appear {
    opacity: 0.01;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.example-appear.example-appear-active {
    opacity: 1;
}
h1 {
    color: #2faeff;
    font-size: 1.2rem;
    font-weight: 100;
    margin-bottom: 20px;
}
::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    
    color: rgba(47, 174, 255, 0.4);
}
.gender {
    color: rgba(47, 174, 255, 0.5);
    padding: 25px;
    font-size: .9rem;
    font-weight: 100;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    cursor: pointer;
    position: relative;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
.gender input {
    width: auto;
    left: 0;
}
.gender:hover {
    color: rgba(47, 174, 255, 0.8);
}
[type="radio"] {
    position: absolute;
    cursor: pointer;
}
[type="radio"]:checked + span {
    color: white;
}
[type="radio"] + img {
    opacity: .7;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
[type="radio"]:checked + img {
    border: 2px solid #fff;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
    opacity: 1;
}
.radio-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.avatar {
    border-radius: 100%;
    height: 50px;
    width: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    cursor: pointer;
}
.avatar__container {
    -webkit-flex-basis: 33%;
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
    margin: 15px 0;
}
.avatar__wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.avatar__input {
    display: none;
}
.avatar--image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.avatar--image img {
    margin: 40px auto 20px;
    width: 75px;
    height: 75px;
    border-radius: 100%;
}
.tally {
    display: block;
    width: 100%;
    font-size: .7rem;
    font-weight: 500;
    margin: 0 10px 20px;
    color: #777;
    text-transform: uppercase;
}
.category {
    display: inline-block;
    margin-right: 20px;
    letter-spacing: 1px;
}
.focus {
    color: #333;
    margin-left: 3px;
}
.app-title {
    text-transform: none;
    margin-bottom: 10px;
    margin-top: 0;
}
.number-primary {
    margin-right: 5px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

HTML

选择头像、名字和年龄，自动创建出个人档案卡片。头像来自randomuser开放服务。

react, profile, card

编辑器支持Emmet

快捷键

选择头像、名字和年龄，自动创建出个人档案卡片。头像来自randomuser开放服务。

react, profile, card

使用ReactJS的SVG过滤器组件实现的弯曲卡通人物肖像

使用ReactJS实现的一款图片轮播界面组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：