React第八讲课堂笔记(表单操作)

1. React表单组件和 html 的不同点

  • value/checked 属性设置后,用户输入无效
  • textarea 的值要设置在 value 属性
<textarea name="description" value="This is a description." />
  • selectvalue 属性可以是数组,不建议使用 optionselected 属性
<select multiple={true} value={['B', 'C']}>
   <option value="A">Apple</option>
   <option value="B">Banana</option>
   <option value="C">Cranberry</option>
 </select>
  • input/textareaonChange 用户每次输入都会触发(即使不失去焦点)
  • radio/checkbox/option 点击后触发 onChange

2. 综合表达组件示例

  1. 定义复选框组件Checkboxes ``` import React, { Component } from 'react';

class Checkboxes extends Component { render(){ return A B C } }

export default Checkboxes;



2. 定义单选框按钮组RadioButtons

import React, { Component } from 'react';

class RadioButtons extends Component { saySomething(){ alert("我是一个很棒的单选框按钮组"); } render(){ return A B C } }

export default RadioButtons;


3. FormApp组件集成两个组件并处理表单逻辑

'use strict';

import React, { Component } from 'react'; import Checkboxes from './Checkboxes'; import RadioButtons from './RadioButtons';

class FormApp extends Component {

state = { inputValue: '请输入...', selectValue: 'A', radioValue:'B', checkValues:[], textareaValue:'请输入...' }

handleSubmit = (e) => { e.preventDefault();

  let formData = {
      input: this.refs.goodInput.value,
      select: this.refs.goodSelect.value,
      textarea: this.refs.goodTextarea.value,
      radio: this.state.radioValue,
      check: this.state.checkValues,
  }

  alert('您即将提交表单')
  console.log('你提交的数据是:')
  console.log(formData);

}

handleRadio = (e) => { this.setState({ radioValue: e.target.value, }) }

handleCheck = (e) => { let checkValues = this.state.checkValues.slice(); let newVal = e.target.value; let index = checkValues.indexOf(newVal);

  if( index == -1 ){
      checkValues.push( newVal )
  }else{
      checkValues.splice(index,1);
  }

  this.setState({
      checkValues: checkValues,
  })

}

render(){ return

请输入内容


      <h3> 请选择 </h3>
      <select defaultValue={ this.state.selectValue } ref="goodSelect">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
      </select>
      <br/>

      <h3> 单项选择 </h3>
      <RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
      <br/>

      <h3> 多选按钮 </h3>
      <Checkboxes handleCheck={this.handleCheck} />
      <br/>

      <h3> 反馈建议 </h3>
      <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
      <br/>

      <button type="submit">确认提交</button>
  </form>

} }

export default FormApp;

```

results matching ""

    No results matching ""