使用React和Masonry实现的便签纸（贴士）墙

React JS notes (+ masonry.js, jscolor.js) app，带本地保存功能。可用于任务列表、待办事项、提醒小纸条、敏捷项目管理等。

react, app, notes

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class Note extends React.Component{
  render(){
    var style = {
      backgroundColor: this.props.color
    }
    return (<div className="note" style={style}>{this.props.children}
        <span className="note-delete" onClick={this.props.onDelete}>x</span>
      </div>);
  }
}

class NoteEditor extends React.Component{
  constructor(props){
    super(props);
    this.color = 'ff6680';
    this.state = {text: '', color: this.color};
  }
  handleChange(e){
    this.setState({text: e.target.value});
  }
  handleChangeColor(e){
    this.setState({color: e.target.value});
  }
  render(){
    return (<div className="note-editor">
        <textarea placeholder="Enter your note here..." onChange={this.handleChange.bind(this)}>{this.state.text}</textarea>
        <input className="jscolor" value={this.state.color} onBlur={this.handleChangeColor.bind(this)}/>
        <button onClick={() => this.props.onNoteAdd(this.state.text, this.state.color)}>Add</button>
      </div>);
  }
}

class NotesGrid extends React.Component{
  componentDidMount(){
    var grid = this.refs.grid;
    this.msnry = new Masonry( grid, {
      // options
      itemSelector: '.note',
      columnWidth: 200,
      gutter: 10
    });
  }
  
  componentDidUpdate(prevProps){
    if(this.props.notes.length != prevProps.notes.length){
      this.msnry.reloadItems();
      this.msnry.layout();
    }
  }
  
  render(){
    var onNoteDelete = this.props.onNoteDelete;
    return (<div className="notes-grid" ref="grid">
        {this.props.notes.map((note) => (
          <Note 
            key={note.id} 
            color={note.color}
            onDelete={onNoteDelete.bind(null, note)}>
            {note.text}
          </Note>))}
      </div>);
  }
}

class NotesApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {notes:[
      {id:1, text:'DemoNote', color:'coral'},
      {id:2, text:'You can use Masonry with vanilla JS', color:'aliceblue'},
      {id:3, text:'You can initialize Masonry in HTML, without writing any JavaScript', color:'gold'},
      {id:4, text:'HTML initialization was previously done with a class of js-masonry and setting options in data-masonry-options in Masonry v3. Masonry v4 is backwards compatible with this code.', color:'lightpink'},
      {id:5, text:'Masonry v4 is backwards compatible with this code.', color:'#C9A39C'}
    ]}
  }
  
  componentDidMount(){
    var localNotes = JSON.parse(localStorage.getItem('notes'));
    if(localNotes){
      this.setState({notes: localNotes});
    }
  }
  
  updateLocalStorage(){
    var notes = JSON.stringify(this.state.notes);
    localStorage.setItem('notes', notes);
    console.log('update ls');
  }
  
  onNoteAdd(noteText, noteColor){
    var notesNew = this.state.notes.slice();
    notesNew.unshift({id: Date.now(), text: noteText, color: '#'+noteColor});
    this.setState({notes: notesNew});
  }
  
  onNoteDelete(note){
    var notesNew = this.state.notes.filter((_note) => _note.id != note.id);
    this.setState({notes: notesNew});
  }
  
  componentDidUpdate(){
    this.updateLocalStorage();
  }
  
  render(){
    return (<div className="notes-app">
        <NoteEditor onNoteAdd={this.onNoteAdd.bind(this)}/>
        <NotesGrid notes={this.state.notes} onNoteDelete={this.onNoteDelete.bind(this)}/>
      </div>);
  }
}

ReactDOM.render(<NotesApp/>, document.getElementById('root'));

编译

CSS

:root {
    background: #ccc;
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
}
#root {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.note {
    background: #f2e379;
    width: 200px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: box-shadow 0.2s;
}
.note:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.24);
}
.note .note-delete {
    position: absolute;
    right: 5px;
    top: 0;
    cursor: pointer;
}
.notes-grid {
    max-width: 620px;
}
.note-editor {
    max-width: 620px;
    text-align: center;
    position: relative;
}
.note-editor textarea {
    width: 100%;
    max-width: 100%;
    height: 150px !important;
    outline: none;
    resize: none;
    display: block;
    border: none;
    padding: 15px 15px 50px 15px;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.note-editor button {
    width: 100px;
    height: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #408e51;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    outline: none;
    cursor: pointer;
}
.note-editor button:hover {
    box-shadow: none;
}
.note-editor .jscolor {
    position: absolute;
    right: 125px;
    bottom: 15px;
    width: 100px;
    height: 30px;
    padding: 5px;
    border: 1px solid #ccc;
    outline: none;
}
.notes-app {
    width: 620px;
}

HTML

React JS notes (+ masonry.js, jscolor.js) app，带本地保存功能。可用于任务列表、待办事项、提醒小纸条、敏捷项目管理等。

react, app, notes

编辑器支持Emmet

快捷键

React JS notes (+ masonry.js, jscolor.js) app，带本地保存功能。 可用于任务列表、待办事项、提醒小纸条、敏捷项目管理等。

react, app, notes

使用React、MobX和jQuery实现的支付表单模板

使用ReactJS和Mo.js实现的甩热狗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

React JS notes (+ masonry.js, jscolor.js) app，带本地保存功能。可用于任务列表、待办事项、提醒小纸条、敏捷项目管理等。