PREACT学习笔记

Posted 2021-04-26 前端加油鸭

Forms

Preact表单的工作原理与html中的表单基本相同。您渲染一个控件，并将使用事件侦听它。

主要区别在于，在大多数情况下，该值不是由DOM节点控制，而是由Preact控制。

受控和非受控组件

在谈论表单控件时，您经常会遇到“受控组件”和“不受控制的组件”两个词。该描述是指处理数据流的方式。DOM具有双向数据流，因为每个表单控件都自行管理用户输入。用户输入时，简单的文本输入都始终更新其值。

相反，像Preact这样的框架通常具有单向数据流。组件并不管理值本身，而是管理组件树中更高的部分。

// Uncontrolled, because Preact doesn't set the value<input onInput={myEventHandler} />;
// Controlled, because Preact manages the input's value now<input value={someValue} onInput={myEventHandler} />;

通常，您应始终使用受控组件。但是，在构建独立的组件或包装第三方UI库时，仅将组件用作非preact功能的安装点使用。在这些情况下，“不受控制”的组件更加适合。

（这里要注意的是，将值设置为undefined或null实际上将变得不受控制。）

创建一个简单的表格

让我们创建一个简单的表单来提交待办事项。我们创建一个<form> 元素并绑定一个在提交表单时被调用的事件。我们对文本输入字段执行类似的操作，但请注意将值存储在类中。您猜对了，我们在这里使用受控输入。在此示例中，它非常有用，因为我们需要在另一个元素中显示输入的值。

class TodoForm extends Component { state = { value: '' };
 onSubmit = e => { alert("Submitted a todo"); e.preventDefault(); }
 onInput = e => { const { value } = e.target; this.setState({ value }) }
 render(_, { value }) { return ( <form onSubmit={this.onSubmit}> <input type="text" value={value} onInput={this.onInput} /> <p>You typed this value: {value}</p> <button type="submit">Submit</button> </form> ); }}

选择输入框

<select> 元素涉及更多，但与所有其他表单控件类似：

class MySelect extends Component { state = { value: '' };
 onChange = e => { this.setState({ value: e.target.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">Submit</button> </form> ); }}

复选框和单选按钮

构建受控表单时，复选框和单选按钮（<input type =“ checkbox | radio”>）初始化时可能引起混乱。这是因为在不受控的环境中，我们通常会允许浏览器为我们“切换”或“选中”复选框或单选按钮，监听change事件并对新值做出反应。但是，此改变无法反映到ui层，UI始终会根据state和props更改自动更新。

（遍历：假设我们在复选框上侦听“更改”事件，该事件在用户选中或取消选中该复选框时触发。在更改事件处理程序中，我们将state值设置为从复选框接收到的新值。这样做将触发组件的重新渲染，这将把复选框的值重新分配给state的值。这是不必要的，因为我们只是向DOM询问了一个值，然后告诉它再次我们想要的时进行渲染。）

因此，与其监听一个输入事件，不如监听一个点击事件，该事件在用户单击复选框或关联的<label>时触发。复选框只是在布尔值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> ); }}