我已经开始了一个新的 Web App React 项目。 我想轻松开始并向给定的 react 代码添加一个文本框,但我不知道这样做很热。 我应该创建一个新组件然后将其添加到另一个组件吗? 或者我怎样才能向给定的组件添加一个简单的文本框?
import React, { Component } from 'react';
export class Home extends Component {
displayName = Home.name
render() {
return (
<div>
<h1>Hello world! This is Itay's new Web App</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
<li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li>
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
</ul>
<p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
</div>
);
}
}
我想我应该在 render() 中添加新的文本框
提前致谢。
最佳答案
您可以在渲染中添加文本框或创建一个组件并使用它。 文本框将从状态中读取值并在 onChange 时使用其当前值更新状态。
render() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
关于javascript - 如何在 react 中创建文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52915543/