主页 分类 关于

React 表单与事件

  1. 实例 1
  2. 实例 2
  3. Select 下拉菜单
  4. 多个表单
  5. React 事件
    1. onClick 事件
    2. 更新父组件的 state

React笔记

实例 1

<body>
<div id="example"></div>
<script type="text/babel">
class Content extends React.Component {
  render() {
    return  <div>
            {/*  设置了输入框 input 值 value = {this.state.data} 在输入框值发生变化时我们可以更新 state 我们可以使用 onChange 事件来监听 input 的变化, 并修改 state  */} 
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
}
class MyNameIsStitch extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: '我叫史迪奇'};
      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(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

查看效果

实例 2

<body>
    <div id="example"></div>
    <script type="text/babel">
    var Content = React.createClass({
      render: function() {
        return  <div>
                {/*  在子组件上使用表单 onChange 方法将触发 state 的更新并将值传递到子组件的输入框的 value 上来重新渲染界面 需要在父组件通过创建事件句柄 (handleChange)并作为 prop (updateStateProp) 传递到子组件上  */} 
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
                <h4>{this.props.myDataProp}</h4>
                </div>;
      }
    });
    var MyNameIsStitch = React.createClass({
      getInitialState: function() {
        return {value: '我叫史迪奇'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <Content myDataProp = {value} 
                  updateStateProp = {this.handleChange}></Content>
               </div>;
      }
    });
    ReactDOM.render(
      <MyNameIsStitch />,
      document.getElementById('example')
    );
    </script>
</body>

查看效果

Select 下拉菜单

<body>
<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('你喜欢的实验品: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择您最喜欢的网站
          <select value={this.state.value} onChange={this.handleChange}>
            {/*  不使用 selected 属性, 而在根 select 标签上用 value 属性来表示选中项  */} 
            <option value="Stitch">史迪奇</option>
            <option value="Reuben">鲁本</option>
            <option value="Angel ">安琪</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

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

查看效果

多个表单

<body>
<div id="example"></div>
<script type="text/babel">
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          是否离开:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          访客数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}
ReactDOM.render(
  <Reservation />,
  document.getElementById('example')
);
</script>
</body>

查看效果

React 事件

onClick 事件

<body>
<div id="example"></div>
<script type="text/babel">

class MyNameIsStitch extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'My name is Stitch'};
      this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: '我叫史迪奇'})
  }
  render() {
    var value = this.state.value;
    return <div>
            <button onClick={this.handleChange}>翻译</button>
            <h4>{value}</h4>
           </div>;
  }
}
ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

查看效果

更新父组件的 state

<body>
<div id="example"></div>
<script type="text/babel">
class Content extends React.Component {
  render() {
    return  <div>
              <button onClick = {this.props.updateStateProp}>点我</button>
              <h4>{this.props.myDataProp}</h4>
           </div>
  }
}
class MyNameIsStitch extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'My name is Stitch'};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({value: '我叫史迪奇'})
  }
  render() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
}
ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

查看效果










作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-form-event.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议