React.js的表单(六) React.js的表单(六)

HTML 表单元素与 React 中的其他 DOM 元素有所不同，因为表单元素自然地保留了一些内部状态。例如，这个纯 HTML 表单接受一个单独的 name：

Name:

该表单和 HTML 表单的默认行为一致，当用户提交此表单时浏览器会打开一个新页面。如果你希望 React 中保持这个行为，也可以工作。但是多数情况下，用一个处理表单提交并访问用户输入到表单中的数据的 JavaScript 函数也很方便。实现这一点的标准方法是使用一种称为“受控组件(controlled components)”的技术。
受控组件(Controlled Components) 在 HTML 中，表单元素如，

</code> 和 <code></code> 表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 <code>setState()</code> 更新。<br />

 
 <strong>【React.js的表单(六)】</strong>我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。<br />

 
 例如，如果我们想使上一个例子在提交时记录名称，我们可以将表单写为受控组件：<br />

 
 <blockquote><code>class NameForm extends React.Component {
constructor(props) {
super(props);

this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}handleChange(event) {
this.setState({value: event.target.value});

}handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);

event.preventDefault();

}render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value=https://www.it610.com/article/{this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="https://www.it610.com/article/Submit" />
</form>
);

}
}
</code></blockquote><br />

 
 设置表单元素的value属性之后，其显示值将由this.state.value决定，以满足React状态的同一数据理念。每次键盘敲击之后会执行handleChange方法以更新React状态，显示值也将随着用户的输入改变。<br />

 
 由于 value 属性设置在我们的表单元素上，显示的值总是 this.state.value，以满足 state 状态的同一数据理念。由于 handleChange 在每次敲击键盘时运行，以更新 React state(状态)，显示的值将更新为用户的输入。<br />

 
 对于受控组件来说，每一次 state(状态) 变化都会伴有相关联的处理函数。这使得可以直接修改或验证用户的输入。比如，如果我们希望强制 name 的输入都是大写字母，可以这样来写 handleChange 方法：<br />

 
 <blockquote><code>handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});

}
</code></blockquote><br />

 
 所以，受控组件是将表单元素的值与组件的状态绑定在一起，并同步数据。<br />

 
 textarea 标签 
 在 HTML 中，<textarea> 元素通过它的子节点定义了它的文本值：<br />

 
 <blockquote><code><textarea>
Hello there, this is some text in a text area

在 React 中，

的赋值使用 value 属性替代。这样一来，表单中 <textarea> 的书写方式接近于单行文本输入框 ：<br />

<blockquote><code>class EssayForm extends React.Component {
constructor(props) {
super(props);

this.state = {
value: 'Please write an essay about your favorite DOM element.'
};
this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}handleChange(event) {
this.setState({value: event.target.value});

}handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);

event.preventDefault();

}render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<textarea value=https://www.it610.com/article/{this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="https://www.it610.com/article/Submit" />
</form>
);

}
}
</code></blockquote><br />

注意，this.state.value 在构造函数中初始化，所以这些文本一开始就出现在文本域中。<br />

select 标签 
 在 HTML 中， 创建了一个下拉列表。例如，这段 HTML 创建一个下拉的口味(flavors)列表：<br />

<blockquote><code>
<option value="https://www.it610.com/article/grapefruit">Grapefruit</option>
<option value="https://www.it610.com/article/lime">Lime</option>
<option selected value="https://www.it610.com/article/coconut">Coconut</option>
<option value="https://www.it610.com/article/mango">Mango</option></code></blockquote><br />

注意，Coconut 选项是初始化选中的，因为它的 selected 属性。React 中，并不使用这个 selected 属性，而是在根 select 标签中使用了一个 value 属性。这使得受控组件使用更方便，因为你只需要更新一处即可。例如：<br />

<blockquote><code>class FlavorForm extends React.Component {
constructor(props) {
super(props);

this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}handleChange(event) {
this.setState({value: event.target.value});

}handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);

event.preventDefault();

}render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:<option value="https://www.it610.com/article/grapefruit">Grapefruit</option>
<option value="https://www.it610.com/article/lime">Lime</option>
<option value="https://www.it610.com/article/coconut">Coconut</option>
<option value="https://www.it610.com/article/mango">Mango</option></label>
<input type="submit" value="https://www.it610.com/article/Submit" />
</form>
);

}
}
</code></blockquote><br />

总的来说，这使 <input type="text">， <textarea> 和都以类似的方式工作 —— 它们都接受一个 value 属性可以用来实现一个受控组件。<br />

注意 
 您可以将一个数组传递给 value 属性，允许你在 select 标签中选择多个选项：<br />

file input 标签 
 在HTML中， <code><input type="file"></code> 可以让用户从设备存储器中选择一个或多个文件上传到服务器，或者通过 JavaScript 使用 File API 操作。<br />

在 React 中，一个 <input type =“file”/> 和一个普通的 <input /> 类似，但有一个重要的区别：它是只读的(read-only)。 （您不能以编程方式设置值。）相反，你应该使用 File API 与文件进行交互。<br />

以下示例显示了如何使用一个 ref 来访问提交处理程序中的文件：<br />

<blockquote><code>class FileInput extends React.Component {
constructor(props) {
super(props);

this.handleSubmit = this.handleSubmit.bind(
this
);

}
handleSubmit(event) {
event.preventDefault();

alert(
`Selected file - ${
this.fileInput.files[0].name
}`
);

}render() {
return (
<form
onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;

}}
/>
</label>
<br />

<button type="submit">
Submit
</button>
</form>
);

}
}ReactDOM.render(
<FileInput />,
document.getElementById('root')
);

</code></blockquote><br />

以上，ref是React提供的属性。this.fileInput 接收的是所传文件的路径。<br />

处理多个输入元素 
 当您需要处理多个受控的 input 元素时，您可以为每个元素添加一个 name 属性，并且让处理函数根据 event.target.name 的值来选择要做什么。<br />

例如：<br />

<blockquote><code>class Reservation extends React.Component {
constructor(props) {
super(props);

this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);

}handleInputChange(event) {
const target = event.target;

const value = https://www.it610.com/article/target.type ==='checkbox' ? target.checked : target.value;

const name = target.name;
this.setState({
[name]: value
});

}render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />

<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value=https://www.it610.com/article/{this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);

}
}
</code></blockquote><br />

以上代码中，状态处理函数handleInputChange可以处理两个input元素的输入。<br> 注意我们如何使用ES6计算的属性名称语法来更新与给定输入名称相对应的 state(状态) 键：<br />

<blockquote><code>this.setState({
[name]: value
});

</code></blockquote><br />

这段代码等价于 ES5 代码:<br />

<blockquote><code>var partialState = {};

partialState[name] = value;

this.setState(partialState);

</code></blockquote><br />

此外，由于 <code>setState()</code> 自动将部分状态合并到当前状态，所以我们只需要调用更改的部分即可。<br />

受控 Input 组件的 null 值 
 在 受控组件 上指定值 prop 可防止用户更改输入，除非您希望如此。 如果你已经指定了一个 <code>value</code> ，但是输入仍然是可编辑的，你可能会意外地把 <code>value</code> 设置为<code>undefined</code> 或 <code>null</code> 。<br />

以下代码演示了这一点。 （输入首先被锁定，但在短暂的延迟后可以编辑。）<br />

<blockquote><code>ReactDOM.render(<input value="https://www.it610.com/article/hi" />, mountNode);
setTimeout(function() {
ReactDOM.render(<input value=https://www.it610.com/article/{null} />, mountNode);

}, 1000);

</code></blockquote><br />

上述代码指定了属性mountNode<br />

受控组件的替代方案 
 有时使用受控组件有些乏味，因为你需要为每一个可更改的数据提供事件处理器，并通过 React 组件管理所有输入状态。当你将已经存在的代码转换为 React 时，或将 React 应用程序与非 React 库集成时，这可能变得特别烦人。在这些情况下，您可能需要使用不受控的组件，用于实现输入表单的替代技术。<br> 参考：<br />

<ul> 
<li>https://reactjs.org/</li> 
<li>http://www.css88.com/react/docs/state-and-lifecycle.html</li> 
 </ul></p>
<div class="dede_pages"><ul></ul></div>
		  	<div class="pcd_ad">
<center><div class="_ahwullr0ac"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6834461",
            container: "_ahwullr0ac",
            async: true
        });
    </script>
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script></center>
</div>
<div class="mbd_ad">
<div style=margin-top:10px;margin-bottom:10px;>
<div class="_i7aftr79jl"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u5950612",
            container: "_i7aftr79jl",
            async: true
        });
    </script>
    
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script>
</div>
</div>
<h3>推荐阅读</h3>
<ul class="post-loop post-loop-default cols-0">
           <li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3870182.html" title="《后会无期》营销分析"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="《后会无期》营销分析" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3870182.html"> <b>《后会无期》营销分析 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2880780.html" title="请在哪里找到靠谱免费的剪辑视频教程？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="请在哪里找到靠谱免费的剪辑视频教程？" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2880780.html"> <b>请在哪里找到靠谱免费的剪辑视频教程？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/0106411G52022.html" title="家庭|2022-2028年中国家庭影院市场投资分析及前景预测报告"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="家庭|2022-2028年中国家庭影院市场投资分析及前景预测报告" src="https://p0.ssl.img.360kuai.com/t01aaf15dcf2f2765d5.jpg?size=2480x3508"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/0106411G52022.html"> <b>家庭|2022-2028年中国家庭影院市场投资分析及前景预测报告 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/4112602.html" title="mysql各种索引的使用场景 mysql索引的内部实现"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="mysql各种索引的使用场景 mysql索引的内部实现" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/4112602.html"> <b>mysql各种索引的使用场景 mysql索引的内部实现 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3215060.html" title="老于世故怎么造句,老于世故成语造句"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="老于世故怎么造句,老于世故成语造句" src="http://img.readke.com/231012/0544526311-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3215060.html"> <b>老于世故怎么造句,老于世故成语造句 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2549419.html" title="谷雨祭海的意义和价值 谷雨祭海的意义"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="谷雨祭海的意义和价值 谷雨祭海的意义" src="http://img.readke.com/230617/23595935E-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2549419.html"> <b>谷雨祭海的意义和价值 谷雨祭海的意义 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1823613.html" title="神角技巧烹饪攻略 神角技巧烹饪怎么玩"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="神角技巧烹饪攻略 神角技巧烹饪怎么玩" src="http://img.readke.com/230428/0S3004418-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1823613.html"> <b>神角技巧烹饪攻略 神角技巧烹饪怎么玩 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3289494.html" title="阳信：迎来灵活就业人员公积金开户“开门红”"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="阳信：迎来灵活就业人员公积金开户“开门红”" src="http://img.readke.com/231028/034Z4O03-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3289494.html"> <b>阳信：迎来灵活就业人员公积金开户“开门红” </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3536744.html" title="nvidia显卡设置怎么设置，nvidia显卡怎么设置最好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="nvidia显卡设置怎么设置，nvidia显卡怎么设置最好" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3536744.html"> <b>nvidia显卡设置怎么设置，nvidia显卡怎么设置最好 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3534419.html" title="苹果英语怎么说 苹果英语单词是什么"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="苹果英语怎么说 苹果英语单词是什么" src="http://img.readke.com/231125/0320203548-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3534419.html"> <b>苹果英语怎么说 苹果英语单词是什么 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3598747.html" title="谎报安全事故罪既遂法院会判多久？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="谎报安全事故罪既遂法院会判多久？" src="http://img.readke.com/231128/1TZ35B6-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3598747.html"> <b>谎报安全事故罪既遂法院会判多久？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3859423.html" title="索尼快门按钮怎么换 尼康快门按钮怎么拆"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="索尼快门按钮怎么换 尼康快门按钮怎么拆" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3859423.html"> <b>索尼快门按钮怎么换 尼康快门按钮怎么拆 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3196697.html" title="成语一时语塞的意思和解释"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="成语一时语塞的意思和解释" src="http://img.readke.com/231002/22024060G-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3196697.html"> <b>成语一时语塞的意思和解释 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1936529.html" title="芝士怎么保存比较好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="芝士怎么保存比较好" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1936529.html"> <b>芝士怎么保存比较好 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2836639.html" title="房屋可以转租吗 房屋可以转租吗 合同法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="房屋可以转租吗 房屋可以转租吗 合同法" src="http://img.readke.com/230725/230625A09-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2836639.html"> <b>房屋可以转租吗 房屋可以转租吗 合同法 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1196203.html" title="狐臭怎么解决根除 有狐臭吃香菜会发生什么变化"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="狐臭怎么解决根除 有狐臭吃香菜会发生什么变化" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1196203.html"> <b>狐臭怎么解决根除 有狐臭吃香菜会发生什么变化 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2005070.html" title="家用净水器如何清洗怎样操作 家用净水器清洗技巧"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="家用净水器如何清洗怎样操作 家用净水器清洗技巧" src="http://img.readke.com/230509/20313I3Q-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2005070.html"> <b>家用净水器如何清洗怎样操作 家用净水器清洗技巧 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1125331.html" title="ppt排版美化的操作方法有哪些 PPT排版美化的操作方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="ppt排版美化的操作方法有哪些 PPT排版美化的操作方法" src="http://img.readke.com/230224/04562SB6-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1125331.html"> <b>ppt排版美化的操作方法有哪些 PPT排版美化的操作方法 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/0I11XN2021.html" title="结直肠|即日起，巴南和合川区这些人群可申请肺癌及结直肠免费筛查"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="结直肠|即日起，巴南和合川区这些人群可申请肺癌及结直肠免费筛查" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/0I11XN2021.html"> <b>结直肠|即日起，巴南和合川区这些人群可申请肺癌及结直肠免费筛查 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2980310.html" title="一亩地几块钱就能很好的防治杂草,有些人花了几十元钱还没治好,如何提高除草剂药效？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="一亩地几块钱就能很好的防治杂草,有些人花了几十元钱还没治好,如何提高除草剂药效？" src="http://img.readke.com/230811/1J40UH7-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2980310.html"> <b>一亩地几块钱就能很好的防治杂草,有些人花了几十元钱还没治好,如何提高除草剂药效？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>

</ul>
<p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T5L522022.html" title="热闹中的孤独" target="_blank">热闹中的孤独 
</a></li> <li><a href="/c/021T5L512022.html" title="JAVA（抽象类与接口的区别&重载与重写&内存泄漏）" target="_blank">JAVA（抽象类与接口的区别&重载与重写&内存泄漏） 
</a></li> <li><a href="/c/021T5L4R022.html" title="放屁有这三个特征的，请注意啦！这说明你的身体毒素太多" target="_blank">放屁有这三个特征的，请注意啦！这说明你的身体毒素太多 
</a></li> <li><a href="/c/021T5L4H022.html" title="一个人的旅行，三亚" target="_blank">一个人的旅行，三亚 
</a></li> <li><a href="/c/021T5L3R022.html" title="布丽吉特，人生绝对的赢家" target="_blank">布丽吉特，人生绝对的赢家 
</a></li> <li><a href="/c/021T5L362022.html" title="慢慢的美丽" target="_blank">慢慢的美丽 
</a></li> <li><a href="/c/021T5L342022.html" title="尽力" target="_blank">尽力 
</a></li> <li><a href="/c/021T5L332022.html" title="一个小故事，我的思考。" target="_blank">一个小故事，我的思考。 
</a></li> <li><a href="/c/021T5L322022.html" title="家乡的那条小河" target="_blank">家乡的那条小河 
</a></li> <li><a href="/c/021T5L292022.html" title="《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量" target="_blank">《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量 
</a></li> </ul></p>
            <div class=entry-copyright>
              <p></p>
            </div>
          </div>
          <div class="entry-footer">
    <div class="prev-next sb br mb clearfix">
      <p class="post-prev fl ellipsis">上一篇：<a href='/c/021645391R022.html'>我和玉儿一起成长|我和玉儿一起成长 2019年12月5日 星期四 天气阴雨</a> </p>
      <p class="post-next fr ellipsis">下一篇：<a href='/c/02164539202022.html'>如何在阿里云linux上部署java项目</a> </p>
    </div>

</div>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="widget widget_post_thumb">
        <h3 class="widget-title"><span>更多...</span></h3>
        <ul>
          <li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/1003264K12021.html" title="成功的喜悦与失败的泪水"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="成功的喜悦与失败的泪水" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/1003264K12021.html" title="成功的喜悦与失败的泪水">成功的喜悦与失败的泪水</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/0Z112XO2021.html" title="夸夸夸，大学问啊"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="夸夸夸，大学问啊" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/0Z112XO2021.html" title="夸夸夸，大学问啊">夸夸夸，大学问啊</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/09242405R2021.html" title="感染的正能量"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="感染的正能量" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/09242405R2021.html" title="感染的正能量">感染的正能量</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/12203K0402021.html" title="IU亲自设计的衣服，百元就能get同款！"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="IU亲自设计的衣服，百元就能get同款！" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/12203K0402021.html" title="IU亲自设计的衣服，百元就能get同款！">IU亲自设计的衣服，百元就能get同款！</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/11053122b2021.html" title="男人的修养在于控制自己的情绪（第394篇）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="男人的修养在于控制自己的情绪（第394篇）" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/11053122b2021.html" title="男人的修养在于控制自己的情绪（第394篇）">男人的修养在于控制自己的情绪（第394篇）</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/10292c5U2021.html" title="【转】主动降噪（ANC）技术由浅至深大集合~"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="【转】主动降噪（ANC）技术由浅至深大集合~" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/10292c5U2021.html" title="【转】主动降噪（ANC）技术由浅至深大集合~">【转】主动降噪（ANC）技术由浅至深大集合~</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/12213K5152021.html" title="跃迁日精进27"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="跃迁日精进27" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/12213K5152021.html" title="跃迁日精进27">跃迁日精进27</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/020643K352022.html" title="【人际】《如何结交比你更优秀的人》复盘"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="【人际】《如何结交比你更优秀的人》复盘" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/020643K352022.html" title="【人际】《如何结交比你更优秀的人》复盘">【人际】《如何结交比你更优秀的人》复盘</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/0Z91O3622021.html" title="鲈肥菰脆调羹美"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="鲈肥菰脆调羹美" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/0Z91O3622021.html" title="鲈肥菰脆调羹美">鲈肥菰脆调羹美</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/10032A53R021.html" title="注意力库存紧张，如何让客户用心看完你的内容"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="注意力库存紧张，如何让客户用心看完你的内容" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/10032A53R021.html" title="注意力库存紧张，如何让客户用心看完你的内容">注意力库存紧张，如何让客户用心看完你的内容</a></p>
            </div>
          </li>

</ul>
      </div>
	
	
    </aside>
  </div>
</div>
<footer class="footer">
  <div class="container">
    <div class="clearfix">
      <div class="footer-col footer-col-logo"> </div>
      <div class="footer-col footer-col-copy">
        <ul class="footer-nav hidden-xs">
          <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li>
          
          <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li>
		  
        </ul>
        <div class="copyright">
          <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p>
        </div>
      </div>
      <div class="footer-col footer-col-sns">
        <div class="footer-sns"> </div>
      </div>
    </div>
  </div>
</footer>
<div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;">
  <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true">
    <use xlink:href="#wi-arrow-up-2"></use>
    </svg></i></div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<script>var _web_js={};</script> 
<script src="/skin/js/index.js"></script>
</body>
</html>