网站图片加载 优化,做网站页面设计报价,长春网络推广哪家好,企业做网站设置哪些模块第8章 DOM操作 多数情况下#xff0c;React的虚拟DOM足以用来创建你想要的用户体验#xff0c;而根本不需要直接操作底层真实的DOM。然而也有一些例外。最常见的场景包括#xff1a;需要与一个没有使用React的第三方类库进行整合#xff0c;或者执行一个React没有原生支持的… 第8章 DOM操作 多数情况下React的虚拟DOM足以用来创建你想要的用户体验而根本不需要直接操作底层真实的DOM。然而也有一些例外。最常见的场景包括需要与一个没有使用React的第三方类库进行整合或者执行一个React没有原生支持的操作。 访问受控的DOM节点 想要访问React控制的DOM节点首先必须能够访问到负责这些DOM的组件。这可以通过为子组件添加一个ref属性来实现。
render () {return (canvas refmainCanvas /)
} 这样就可以通过this.refs.mainCanvas访问到canvas组件。 ⚠️必须保证赋给每个子组件的ref值在所有子组件中是唯一的否则操作就会失效。 可以通过getDOMNode()方法访问到底层的DOM节点。 ⚠️不可以在render方法中这样做。因为这时底层的DOM可能不是最新的甚至尚未创建 尽管refs和getDOMNode很强大但请在没有其他的方法能够实现你需要的功能时再去选择它们。使用它们会成为React在性能优化上的障碍并且增加应用的复杂性。 componentDidMount方法只会为每个DOM节点调用一次。 如果在componentDidMount方法内导致了DOM节点无法被移除有可能导致内存泄漏或者其他的问题。如果你担心这一点请在componentWillUnmount监听器用于在组件的DOM节点移除时清理它自身。 第9章 表单 在React中表单组件有两种类型约束组件和无约束组件 无约束组件 给定一个HTML的input/一个值它的值是可以改变的。这正是无约束组件名称的由来因为表单组件的值是不受React控制的。
submitHandler (event) {event.preventDefault();var hellTo this.refs.hellTo.getDOMNode().value;alert(hellTo)
}
render () {return (form onSubmit{this.submitHandler}input refhellTo typetext defaultValueHello World! /button typesubmitSpeak/button/form)
} 无约束组件可以用在基本的无需任何验证或者输入控制的表单中。 约束组件 约束组件表单的状态交由React组件控制状态值被存储在React组件的state中。
constructor(props) {super(props);this.state {helloTo Hello World!}
}
handleChange (event) {this.setState({helloTo: event.target.value})
}
submitHandler (event) {event.preventDefault();alert(this.state.helloTo)
}
render () {return (form onSubmit{this.submitHandler}input refhellTo typetext onChange{this.handleChange} /button typesubmitSpeak/button/form)
} 表单事件 React支持所有HTML事件。这些事件遵循驼峰命名的约定且会被转成合成事件。 所有合成事件都提供了event.target来访问触发事件的DOM节点。 Label 由于for是JavaScript的保留字所以我们无法把它作为一个对象的属性。 jsx
label htmlFornameName:/label javascript
React.DOM.label({htmlFor:name, Name}); 渲染后
label fornameName:/label 文本框和Select React对textarea/和select/的接口做了一些修改提升了一致性让它们操作起来更容易。 textarea/被改的更像input/了允许我们设置value和defaulteValue。
//非约束的
textareadefaultValue HelloWorld /
//约束的
textareavalue{this.state.helloTo } onChange {this.handleChange} ///非约束的
selectdefaultValue8option valueAFirst Option/optionoption valueBSecond Option/optionoption value CThird Option/option
/select
//约束的
selectvalue {this.state.helloTo} onchange{this.handleChange}option valueAFirstOption /optionoption valueBSecond Option /optionoption valueCThird Option/option
/select React支持都选selce他需要给value的defauletValue传递一个数组如defaultValue{[A,B]}。 当使用可多选的select时select组件的值在选项被选择时不会更新只有选项的selected属性会发生变化。你可以使用ref或者syntheticEvent.target来访问选项检查他们是否被选中。 下面的例子中handleChange循环检查DOM并过滤出哪些选项被选中了。
class Hello extends React.Component {constructor(props) {super(props);this.state {option: [B]};}handleChange (event) {var checked [];var sel event.target;for (var i 0; i sel.length; i){var option sel.options[i];if (option.selected){checked.push(option.value);}}this.setState({option: checked});}submitHandler (event) {event.preventDefault();alert(this.state.options);}render () {return(form onSubmit{this.submitHandler}select multipletrue value{this.state.options}onChange{this.handleChange}option valueA1/optionoption valueB2/optionoption valueC3/option/selectbr /button typesubmitspeak/button/form);}
} 复选框和单选框 复选框和单选框使用的则是完全不同的控制方式。 在HTML中类似为checkbox或者radio的input/的行为完全不一样通常复选框或者单选框的值是不变的只有checked的状态会变化要控制复选框或者单选框就要控制他们的checked属性你要可以在非约束的复选框或者单选框中使用defaultChecked。
//非约束的
var MyForm React.createClass({submitHandler: function(event){event.preventDefault();alert(this.refs.checked.getDOMNode().checked);},render: function(){return (form onSubmit{this.submitHandler}input refchecked typecheckbox valueA defaultCheckedtrue /br /button typesubmitspeak/button/form);}
});//约束的
var MyForm React.createClass({getInitialState: function(){return {checked: true};},handleChange: function(event){this.setState({checked: event.target.checked});},submitHandler: function(event){event.preventDefault();alert(this.state.checked);},render: function(){return (form onSubmit{this.submitHandler}input typecheckbox valueA checked{this.state.checked} onChange{this.handleChange} /br/button typesubmitspeak/button/form);}
}); 在这两个例子中input/的值一直都是A只有checked的状态在变化。 表单元素的name属性 在React中name属性对于表单元素来说并没有那么重要。因为约束表单组件已经把值存储到了state中并且表单的提交事件也会被拦截。在获取表单值的时候name属性并不是必需的。对于非约束的表单组件来说也可以使用refs来直接访问表单元素。虽然如此name仍然是表单组件中非常重要的一部分。 name属性可以让第三方表单序列化类库在React中正常工作。 对于任然使用传统提交方式的表单来说name属性是必需的。 在用户的浏览器中name被用在自动填写常用信息中比如用户地址等。 对于非约束的单选框组件来讲name是有必要得它可作为这些组件分组的依据。确保在同一时刻同一表单中拥有同样name的单选框只有一个可以被选中。如果不使用name属性这一行为可以使用约束的单选框实现。 多表单与change处理器 在使用约束的表单组件时没有愿意重复地为每一个组件编写change处理器。可以在React中重用一个事件处理器。 可以有两种方式通过.bind传递其他参数使用DOMNode的name属性来判断需要更新哪个组件的状态。 示例可以看page75~77 除此之外React还在addon中提供了一个mixinReact.addons.LinkedStateMixin通过另一种方式解决同样的问题。 React.addons.LinkedStateMixin为组件提供了一个linkState方法。linkState返回一个对象包含value和requestChange两个属性。 value根据提供的name属性从state中获取对应的值。 requestChange是一个函数使用心得值更新同名的state。
mixins:[React.addons.LinkedStateMixin]submitHandler (event) {event.preventDefault();alert(this.state.family_name);
}input typetext namefamily_name valueLink{this.linkState(family_name)} / 这种方法便于控制表单域把其值保存在福组件的state中。而且其数据流仍然与其他约束的表单元素保持一致。 但是使用这种方式往数据流中添加定制功能时复杂度会增加。我们建议只在特性的场景下使用。因为传统的约束表单组件提供了同样的功能而且更加灵活。 自定义表单组件 当编写自定义组件时接口应当与其他表单组件保持一致。这可以帮助用户理解代码明白如何使用自定义组件且无须深入到组件的实现细节里。 示例page79~82 Focus React实现了autoFocus属性因此在组件第一次被挂载时如果没有其他的表单聚焦时React就会把焦点放到这个组件对应的表单域中例如
input typetext namegiven_nameautoFocustrue / 还有一种方法就是调用DOMNode的focus方法手动设置表单域聚焦。 可用性 React虽然提高了开发者的生产力但是也有不尽如人意的地方使用React编写的组件常常缺乏可用性例如表单提交无法通过键盘敲击回车键来实现而这明明是HTML表单默认的提交方式。 要编写具有高可用性的好组件其实也不难只是编写组件时需要花时间进行更多的思考。 把要求传达清楚 不断地反馈 迅速响应 符合用户的预期 可访问 减少用户的输入
