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. === 
      ? event..
      : event..;
    
    .(newState);
    .(newState);
  },

  () {
    e.();
     is = .. ?  : ;
     gender = .. ===  ?  : ;
    (.. + is + gender + );
  },

  () {
     (
      
    );
  }
});

.(, .());