vlambda博客
学习文章列表

class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' ref={(input) => this.input = input} /> <button type='submit'>Submit</button> </form> ) }}

function CustomForm ({handleSubmit}) {let inputElementreturn (<form onSubmit={() => handleSubmit(inputElement.value)}><inputtype='text'ref={(input) => inputElement = input} /><button type='submit'>Submit</button></form> )}

class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; }}

class UserForm extends Component { handleSubmit = () => { console.log("Input Value is: ", this.input.value) } render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' ref={(input) => this.input = input} /> // Access DOM input in handle submit <button type='submit'>Submit</button> </form> ) }}

const EnhancedComponent = higherOrderComponent(WrappedComponent);

class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // { name: 'sudheer',age: 30 } }}

class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // undefined // 但是 Props 参数仍然可用 console.log(props); // Prints { name: 'sudheer',age: 30 } }
 render() { // 构造函数外部不受影响 console.log(this.props) // { name: 'sudheer',age: 30 } }}

const element = ( <h1 className="greeting"> Hello, world! </h1>)

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');

class MyComponent extends React.Component { render() {let props = this.props; return (<div className="my-component"><a href={props.url}>{props.name}</a></div> ); }}

 // 错误 This.state.message = 'Hello world';

// 正确做法This.setState({message: ‘Hello World’});

<Modal {...this.props} title='Modal heading' animation={false}/>

<Modal {...this.props} title='Modal heading' animation={false}>

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}};});

...const [count, setCounter] = useState(0);const [moreStuff, setMoreStuff] = useState(...);...
const setCount = () => { setCounter(count + 1); setMoreStuff(...); ...};

class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; this.handleSubmit = this.handleSubmit.bind(this); }
 handleSubmit() { this.setState({ isFormSubmitted: true }); }
 render() { return ( <button onClick={this.handleSubmit}>Submit</button> ) }}

<div><div><h1>This is heading</h1><p>this is paragraph</p><div><p>This is just a paragraon</p></div></div><div><h1>This is heading</h1><p>this is paragraph</p><div><p>This is just a paragraon</p></div></div><div><h1>This is heading</h1><p>this is paragraph</p><div><p>This is just a paragraon</p></div></div></div>

import PropTypes from 'prop-types';
class User extends React.Component { render() { return ( <h1>Welcome, {this.props.name}</h1> <h2>Age, {this.props.age} ); }}
User.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired};

var InputComponent = React.createClass({ render: function() { var required = true; var disabled = false;
 return ( <input type="text" disabled={disabled} required={required} /> ); }});

<input type="text" required>

var condition = true;
var component = ( <div value="foo" { ...( condition && { disabled: true } ) } />);

class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; }
 render() { return ( <button onClick={() => { this.setState({ isFormSubmitted: true }); }}>Submit</button> ) }}

class SubmitButton extends React.Component { state = { isFormSubmitted: false }
 handleSubmit = () => { this.setState({ isFormSubmitted: true }); }
 render() { return ( <button onClick={this.handleSubmit}>Submit</button> ) }}

const SubmitButton = () => { const [isFormSubmitted, setIsFormSubmitted] = useState(false);
 return ( <button onClick={() => { setIsFormSubmitted(true); }}>Submit</button> )};

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; }}

var MyComponent = React.createClass({ getInitialState() {return { /* initial state */ }; },});

// ES5var React = require('react');// ES6import React from 'react';

// ES5module.exports = Component;// ES6export default Component;

// ES5 var MyComponent = React.createClass({     render: function() {         return             <h3>Hello Edureka!</h3>;     } });  // ES6class MyComponent extends React.Component {    render() {        return            <h3>Hello Edureka!</h3>;   }}

// ES5var App = React.createClass({ propTypes: { name: React.PropTypes.string }, render: function() { return <h3>Hello, {this.props.name}!</h3>; } });// ES6class App extends React.Component { render() { return <h3>Hello, {this.props.name}!</h3>; }}

// ES5 var App = React.createClass({getInitialState: function() {return { name: 'world' }; },render: function() {return<h3>Hello, {this.state.name}!</h3>; }});// ES6class App extends React.Component {constructor() {super();this.state = { name: 'world' }; } render() { return  <h3>Hello, {this.state.name}!</h3>; }}

// 错误方式this.state.name = "some name"// 正确方式this.setState({name:"some name"})

  
    
    
  

   
     
     
   // 错误方式
   
     
     
   this.setState({
   
     
     
    timesVisited: this.state.timesVisited + this.props.count
   
     
     
   })
   
     
     
   // 正确方式
   
     
     
   this.setState((state, props) => {
   
     
     
    timesVisited: state.timesVisited + props.count
   
     
     
   });
  
    
    
  

import React from 'react';import '../App.css';import { ToDoForm } from './todoform';import { ToDolist } from './todolist';export class Dashboard extends React.Component { render() {return (<div className="dashboard"><ToDoForm /><ToDolist /></div> ); }}

import React from 'react';import './App.css';import { Header } from './header/header';import { Footer } from './footer/footer';import { Dashboard } from './dashboard/dashboard';import { UserDisplay } from './userdisplay';
function App() {return (<div className="App"><Header /><Dashboard /><UserDisplay /><Footer /></div> );}
export default App;

import React from 'react';
export const Header = () => {
const heading = 'TODO App'
return(<div style={{backgroundColor:'orange'}}><h1>{heading}</h1></div> )}

import React from 'react';const footerStyle = {width: '100%',backgroundColor: 'green',padding: '50px',font: '30px',color: 'white',fontWeight: 'bold'}export const Footer = () => {return(<div style={footerStyle}> All Rights Reserved 2019</div> )}

  
    
    
  

   
     
     
   // action
   
     
     
   

   
     
     
   { 
   
     
     
   type:"SEND_EMAIL", 
   
     
     
    payload: data
   
     
     
   };
  
    
    
  

  
    
    
  

   
     
     
   // action creator
   
     
     
   

   
     
     
   export function sendEamil(data) {
   
     
     
   return { type:"SEND_EMAIL", payload: data};
   
     
     
   }
  
    
    
  

  
    
    
  

   
     
     
   export default function emailReducer(state = [], action){
   
     
     
   

   
     
     
   switch(action.type) {
   
     
     
   case "SEND_EMAIL": return Object.assign({}, state, {
   
     
     
   email: action.payload
   
     
     
    });
   
     
     
   default: return state;
   
     
     
    }
   
     
     
   }
  
    
    
  

  
    
    
  

   
     
     
   // import connect
   
     
     
   import { connect } from 'react-redux'
   
     
     
   import { bindActionCreators } from 'redux'
   
     
     
   

   
     
     
   // import action creators
   
     
     
   import * as userActions from '../../../actions/userActions';
   
     
     
   

   
     
     
   export class User extends React.Component {
   
     
     
   

   
     
     
    handleSubmit() {
   
     
     
   // dispatch an action
   
     
     
   this.props.actions.sendEmail(this.state.email);
   
     
     
    }
   
     
     
   

   
     
     
   }
   
     
     
   

   
     
     
   // you are mapping you state props
   
     
     
   const mapStateToProps = (state, ownProps) => ({user: state.user})
   
     
     
   // you are binding your action creators to your props
   
     
     
   const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(userActions, dispatch)})
   
     
     
   

   
     
     
   export default connect(mapStateToProps, mapDispatchToProps)(User);
  
    
    
  

如果发生错误，显示回退UI记录错误

  
    
    
  

   
     
     
   import React from 'react'
   
     
     
   

   
     
     
   export class ErrorBoundary extends React.Component {
   
     
     
   constructor(props) {
   
     
     
   super(props);
   
     
     
   this.state = { hasError: false };
   
     
     
    }
   
     
     
   

   
     
     
   static getDerivedStateFromError(error) {
   
     
     
   // Update state so the next render will show the fallback UI.
   
     
     
   return { hasError: true };
   
     
     
    }
   
     
     
   

   
     
     
    componentDidCatch(error, info) {
   
     
     
   // You can also log the error to an error reporting service
   
     
     
   console.log('Error::::', error);
   
     
     
    }
   
     
     
   

   
     
     
    render() {
   
     
     
   if (this.state.hasError) {
   
     
     
   // You can render any custom fallback UI
   
     
     
   return <h1>OOPS!. WE ARE LOOKING INTO IT.</h1>;
   
     
     
    }
   
     
     
   

   
     
     
   return this.props.children; 
   
     
     
    }
   
     
     
    }
  
    
    
  

import React from 'react';import '../App.css';import { ToDoForm } from './todoform';import { ToDolist } from './todolist';import { ErrorBoundary } from '../errorboundary';export class Dashboard extends React.Component { render() {return (<div className="dashboard"><ErrorBoundary><ToDoForm /><ToDolist /></ErrorBoundary></div> ); }}