React 基础：JSX 语法细节与表单组件实战

React 基础：JSX 语法细节与表单组件实战

在 React 开发中，有几个常见的语法细节容易踩坑。比如 HTML 标签中的 for 属性在 JSX 里不能直接使用，需要改为 htmlFor。此外，JSX 中的注释写法也有特定规范。

JSX 语法注意事项

1. 属性命名：for 需写成 htmlFor。
2. 注释方式：使用 {/* 注释内容 */}。

内联样式与表格渲染

在表格列渲染中，经常需要动态设置样式。例如：

{
  dataIndex: 'auditPeople',
  width: "10%",
  render: function(text, record) {
    return text ? text : <p style={{ color: 'red' }}>未审核</p>;
  }
}

表单状态管理实战

下面是一个完整的类组件示例，展示了如何管理表单状态和处理提交事件。注意 handleChange 的统一写法以及 this.setState 的使用。

const MyForm = React.createClass({
  getInitialState() {
    return {
      username: "",
      gender: "man",
      checked: true
    };
  },

  handleChange(event) {
    const newState = {};
    // 根据输入框名称更新对应状态
    newState[event.target.name] = event.target.name === "checked"
      ? event.target.checked
      : event.target.value;
    
    this.setState(newState);
    console.log(newState);
  },

  submitHandler(e) {
    e.preventDefault();
    const is = this.state.checked ? '是' : '不是';
    const gender = this.state.gender === 'man' ? '帅哥' : '美女';
    alert(this.state.username + is + gender + '.');
  },

  render() {
    return (
      <form onSubmit={this.submitHandler}>
        <label htmlFor="username">请输入姓名</label>
        <input 
          type="text" 
          name="username" 
          onChange={this.handleChange} 
          value={this.state.username} 
          id="username" 
        />
        <br/>
        
        <label htmlFor="checkbox">是与否</label>
        <input 
          type="checkbox" 
          value="是否" 
          name="checked" 
          id="checkbox" 
          onChange={this.handleChange} 
          checked={this.state.checked} 
        />
        <br />
        
        <label htmlFor="gender">请选择</label>
        <select 
          name="gender" 
          onChange={this.handleChange} 
          value={this.state.gender}
        >
          <option value="man">帅哥</option>
          <option value="woman">美女</option>
        </select>
        <br />
        
        <button type="submit">提交</button>
      </form>
    );
  }
});

ReactDOM.render(<MyForm />, document.getElementById("reactContainer"));

这段代码涵盖了 React 类组件的核心流程：初始化状态、事件绑定、条件渲染以及 DOM 操作。在实际项目中，建议结合现代 Hooks 语法进行重构，但理解类组件的逻辑对掌握 React 原理依然很有帮助。