react 表单

标签：message   book   网站   render   xtend   doc   text   string   表单   

input框

<div id="example"></div>

<script type="text/babel">
    class Content extends React.Component {
        render() {
            return  <div>
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
                <h4>{this.props.myDataProp}</h4>
            </div>;
        }
    }
    class HelloMessage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: ‘Hello Runoob!‘};
            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event) {
            this.setState({value: event.target.value});
        }
        render() {
            var value = this.state.value;
            return <div>
                <Content myDataProp = {value}
                         updateStateProp = {this.handleChange}></Content>
            </div>;
        }
    }
    ReactDOM.render(
        <HelloMessage />,
        document.getElementById(‘example‘)
    );
</script>

select选择框

<div id="example"></div>

<script type="text/babel">
class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ‘coconut‘};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(‘Your favorite flavor is: ‘ + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择您最喜欢的网站
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="gg">Google</option>
            <option value="rn">Runoob</option>
            <option value="tb">Taobao</option>
            <option value="fb">Facebook</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById(‘example‘)
);
</script>

react 表单

标签：message   book   网站   render   xtend   doc   text   string   表单   

原文地址：https://www.cnblogs.com/hu308830232/p/14920915.html