胖蔡说技术
随便扯扯

Preact 表单使用

Preact 中的表单和 HTML 的一样:渲染一个控件,再为其添加事件监听器。

两者的差别在于大多数情况下 Preact 会为您自动控制 value,而不是由 DOM 节点控制。

约束性和非约束性组件

谈到表单控件时,您可能会时常听到约束性和非约束性组件 ((Un)Controlled Component) 的概念。约束性一词指数据流处理的方式。DOM 是双向的数据流,每个表单控件都会为用户管理输入。比如,一个文本框会自动将其值更新为用户输入的值。

Preact 一类的框架通常使用单向数据流,用组件树中更高的元素来管理数据。

// 非约束性组件,因为 Preact 没有为其设置数值
<input onInput={myEventHandler} />;

// 约束性组件,因为 Preact 管理其输入数值
<input value={someValue} onInput={myEventHandler} />;

您应当尽量使用约束性组件。但如果您是在构建独立组件,或包装第三方 UI 库,那么您可以用您的组件提供非 Preact 功能。这种情况下,您更需要非约束性组件。

此处要注意的是,将值设为 undefined 或 null 等同于非约束性组件。

构建简单表单

我们来创建一个提交待办事项的简单表单吧。为此,我们需要创建一个元素,并为其绑定表单提交时会触发的事件监听器,文本框亦然。但请注意,我们不会在类内存储值,而是使用约束性输入组件。此例中,这种方式非常适合我们在其他元素中显示文本框的值。

class TodoForm extends Component {
  state = { value: '' };

  onSubmit = e => {
    alert("Submitted a todo");
    e.preventDefault();
  }

  onInput = e => {
    this.setState({ e.currentTarget.value })
  }

  render(_, { value }) {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" value={value} onInput={this.onInput} />
        <p>您输入了:{value}</p>
        <button type="submit">提交</button>
      </form>
    );
  }
}


选择菜单

<select> 元素有点复杂,但大致工作原理和其他控件差不多:

class MySelect extends Component {
  state = { value: '' };

  onChange = e => {
    this.setState({ value: e.currentTarget.value });
  }

  onSubmit = e => {
    alert("Submitted " + this.state.value);
    e.preventDefault();
  }

  render(_, { value }) {
    return (
      <form onSubmit={this.onSubmit}>
        <select value={value} onChange={this.onChange}>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
        <button type="submit">提交</button>
      </form>
    );
  }
}

复选框和单选按钮

复选框和单选按钮 () 会在非约束性的表单环境中引发混乱。通常情况下,我们需要浏览器帮我们勾选复选框或按钮,或是监听事件并对新传入的值做出反馈。但是,这种情况不适用于 UI 会自动根据状态和属性更新而自动更新的情况。

详细解释:先假设我们需要监听复选框在用户勾选/反选时触发的 “change” 事件。在事件监听器中,我们将 state 的值设置为复选框传入的值。这样,组件会被重新渲染,导致复选框再次被赋上状态中的值。但我们刚刚才从 DOM 获取值,再次渲染很明显是多此一举。

所以,我们需要监听用户点击复选框或相关 时触发的 click 事件,而非 input 事件。这样,复选框只会在 true 和 false 间切换。再次点击复选框或标签时,我们会将状态的布尔值反转,重新渲染,最后将复选框显示的值设置为我们期望的值。

复选框示例

class MyForm extends Component {
  toggle = e => {
      let checked = !this.state.checked;
      this.setState({ checked });
  };

  render(_, { checked }) {
    return (
      <label>
        <input
          type="checkbox"
          checked={checked}
          onClick={this.toggle}
        />
        选中这个复选框
      </label>
    );
  }
}
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Preact 表单使用
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏