React 表单与事件 简单演示

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';

class myinput extends component{
  constructor(props){
    super(props);
    this.state={
      text:'请输入内容'
    }
    this.textfn=this.textfn.bind(this);
  }

  textfn(e){
      this.setstate({
        text:e.target.value
      })
  }

  render(){
    return(
      <div>
        <input type="text" onchange={this.textfn} placeholder={this.state.text}/>
        <p>{this.state.text}</p>
      </div>
    )
  }
}

  reactdom.render(
    <div>
       <myinput />
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

 

 

如何在子组件上使用表单
在父组件通过创建事件句柄 (handlechange) ，并作为 prop (updatestateprop) 传递到子组件上

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';

class parent extends component{
  constructor(props){
    super(props);
    this.state={
      text:'请输入内容'
    }
    this.textfn=this.textfn.bind(this);
  }

  textfn(e){
      this.setstate({
        text:e.target.value
      })
  }

  render(){
    return(
      <child textfn={this.textfn} text={this.state.text} />
    )
  }
}

class child extends component{
  render(){
    return(
      <div>
        <input type="text" onchange={this.props.textfn} placeholder={this.props.text}/>
        <p>{this.props.text}</p>
      </div>
    )
  }
}

  reactdom.render(
    <div>
       <parent />
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

 

 

在 react 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';

class select extends component{
  constructor(props){
    super(props);
    this.state={
      text:''
    }
    this.selectfn=this.selectfn.bind(this);
    this.submitfn=this.submitfn.bind(this);
  }

  selectfn(e){
      this.setstate({
        text:e.target.value
      })
  }

  submitfn(e){
    console.log('you choosed '+this.state.text);
    e.preventdefault();
}

  render(){
    return(
      <form onsubmit={this.submitfn}>
        <select value={this.state.text} onchange={this.selectfn}>
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
        </select>
        <input type="submit" value="提交" />
      </form>
    )
  }
}

  reactdom.render(
    <div>
       <select />
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

 

 

处理多个 input 元素时，可以给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';

class select extends component{
  constructor(props){
    super(props);
    this.state={
      text:true,
      num:4
    }
    this.changefn=this.changefn.bind(this);
  }

  changefn(e){
    const value=e.target.type==='checkbox' ? e.target.checked : e.target.value;
    const name=e.target.name;
      this.setstate({
        [name]:value
      })
  }

  render(){
    return(
      <form>
        <input type="checkbox" name="text" checked={this.state.text} onchange={this.changefn} />
        <br/>
        <input type="number" name="num" value={this.state.num} onchange={this.changefn} />
      </form>
    )
  }
}

  reactdom.render(
    <div>
       <select />
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();