React.js语法学习总结（二）

1、传递 Props：小技巧

有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 spread 语法会帮到你：

var CheckLink = React.createClass({
render: function() {
// 这样会把 CheckList 所有的 props 复制到 <a>
return <a {...this.props}>{'√ '}{this.props.children}</a>;
}
});

React.render(
<CheckLink href="/checked.html">
Click here!
</CheckLink>,
document.getElementById('example')
);

2、受限组件

设置了 

value

 的 

<input>

 是一个受限组件。
对于受限的 

<input>

，渲染出来的 HTML 元素始终保持 

value

 属性的值。例如：

render: function() {
return <input type="text" value="Hello!" />;
}

上面的代码将渲染出一个值为 

Hello!

 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 

Hello!

。如果想响应更新用户输入的值，就得使用

onChange

 事件：

getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}

上面的代码中，React 将用户输入的值更新到 

<input>

 组件的 

value

 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：

handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}

上面的代码接受用户输入，并截取前 140 个字符。

不受限组件

没有设置 

value

(或者设为 

null

)
的 

<input>

 组件是一个不受限组件。对于不受限的

<input>

 组件，渲染出来的元素直接反应用户输入。例如：

render: function() {
return <input type="text" />;
}

上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 

onChange

 事件可以监听值的变化。

如果想给组件设置一个非空的初始值，可以使用 

defaultValue

 属性。例如：

render: function() {
return <input type="text" defaultValue="Hello!" />;
}

上面的代码渲染出来的元素和受限组件一样有一个初始值，但这个值用户可以改变并会反应到界面上。

同样地， 类型为 

radio

、

checkbox

 的

<input>

 支持 

defaultChecked

 属性， 

<select>

支持 

defaultValue

 属性。

render: function() {
return (
<div>
<input type="radio" name="opt" defaultChecked /> Option 1
<input type="radio" name="opt" /> Option 2
<select defaultValue="C">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
</div>
);
}