React 列表与表单

列表

在React中，拿到一组数据后，一般会用map方法来遍历渲染。

const dataList = [{claimNum: 1}, {claimNum: 2}];
ReactDOM.render(
  <main>
      dataList.length ? (
        dataList.map((item) => {
            return (
              <div className={style['list-content']}>
                <div
                    className={style['claim-number']}
                    onClick={()=>
                      toDetail({
                        typeCode: item.claimTypeCode,
                        claimHeaderId: item.claimHeaderId,
                        entrance: 'WDDJ',
                      })
                    }
                  >{item.claimNum}
                  </div>
                </div>
              );
            })
          ) : (
            <div className={style.noData}>{loading ? null : '未查询到有效数据'}</div>
          )}
  </main>,
  document.getElementById('root')
);

表单

HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中，像 <input>, <textarea><select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

实例

在输入框值发生变化时可以更新 state。可以使用 onChange 事件来监听 input 的变化，并修改 state。

export default class Hello extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello!'};
  }
 
  handleChange = (e) => {
    this.setState({value: e.target.value});
  }
  render() {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={(e)=>this.handleChange} /> 
          <h4>{value}</h4>
     </div>;
    )   
  }
}

select

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

<select value={this.state.value} onChange={(e)=>this.handleChange}>
     <option value="y">1</option>
     <option value="n">2</option>
</select>

多个表单

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

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };
  }
 
  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={(e)=>this.handleInputChange} />
        </label>
        <br />
        <label>
          访客数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

父子组件都使用表单

当你需要从子组件中更新父组件的state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上

// 子组件
class Content extends React.Component {
  render() {
    return  <div>
              <button onClick = {this.props.updateStateProp}>点我</button>
              <h4>{this.props.myDataProp}</h4>
           </div>
  }
}
// 父组件
class HelloMessage extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello world!'};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({value: 'hello'})
  }
  render() {
    var value = this.state.value;
    return (
      <div>
        <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content>
      </div>;
    )
  }
}
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
)