Javascript ReactJS：如何正确使用这个textInput组件？

嗨，我是超级新手。我发现这些文档很难消化，因此我在一些非常基本的东西上遇到了麻烦。我试图在表单中使用这个textinput组件，但我不知道如何动态设置值

这是TextInput组件

import React, { PropTypes } from 'react';

import FormField from './FormField';

var TextInput = React.createClass({
  propTypes: {
    field: PropTypes.object.isRequired
  },
  render() {
    var {field, help, label, ...inputProps} = this.props
    return <FormField field={field} help={help} inputProps={inputProps} label={label}>
      <input
        {...inputProps}
        className="form-control"
        name={field.name}
        value={field.value}
        onBlur={field.onBlur}
        onChange={field.onChange}
      />
    </FormField>
  }
})

export default TextInput

import React，{PropTypes}来自'React'；
从“/FormField”导入FormField；
var TextInput=React.createClass({
道具类型：{
字段：PropTypes.object.isRequired
},
render（）{
var{field，help，label，…inputProps}=this.props
返回
}
})
导出默认文本输入

这就是我使用它的地方

import React from 'react';
import ProfileSideBar from './ProfileSideBar';
import ProfileSectionLabel from './ProfileSectionLabel';
import TextInput from '../forms/TextInput';

class ProfileHome extends React.Component {

render() {

  return <div id='profile-wrapper'>
   <tr width='100%'>
    <td width="33%"> Location </td>
       <td width="33%"> 
         <TextInput field={location} 
          style={{height: 40,
                  borderColor: 'orange', 
                  borderWidth: 1}}>
         </TextInput>
       </td>
   </tr>
  </div>

从“React”导入React；
从“/ProfileSideBar”导入ProfileSideBar；
从“/ProfileSectionLabel”导入ProfileSectionLabel；
从“../forms/TextInput”导入TextInput；
类ProfileHome扩展了React.Component{
render（）{
返回
位置

在我使用TextInput的地方，我试图设置一个默认值。比如：

位置{ 值：'ny' } 因此，如果它存在，它将填充纽约，如果不存在，它将为空

我试过了

<TextInput value={value}> 

它只是不运行。当我删除value=value时，页面呈现，但当然没有我需要的数据

---

我知道我必须（或者至少我认为我知道）设置状态或其他东西，并将其绑定到我的profileHome组件…我只是不知道如何操作。如果有人能告诉我如何操作，我会非常高兴。如果可能，请提供一个好的资源供我查看。我觉得angular更容易获取。

您是否尝试过使用

defaultValue

<TextInput defaultValue={value}> 

---

这将呈现作为默认值传递的任何内容，但是您仍然需要绑定

值

和

onChange

，以反映用户交互，因为您将

用作受控组件。有关详细信息，请参阅React。

这里有一种方法

首先，创建TextInput类，在构造函数中设置文本值的初始状态，并将正确的“this”上下文绑定到下一步要创建的方法：

class TextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'ny' };
    this.onInputChange = this.onInputChange.bind(this);
  }

然后，创建TextInput类的方法，该方法处理对输入值的更改并相应地设置状态：

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

最后，在渲染函数中，您的输入字段将如下所示（加上您想要赋予它的任何其他道具）：

---

至于资源，React文档非常棒，我发现Stephen Grider关于udemy的课程是关于React的最佳教程：。请确保了解React的基本原理（状态和道具）在继续学习本教程的Redux部分之前，这里的内容非常有趣，但肯定更复杂。

ReactJS文档真的很棒。什么不是渲染？如果ProfileHome没有渲染，我会先尝试解决这个问题。Profile home在我没有在TextInput中执行value=value时渲染。你在字段中看到“ny”了吗？你应该这样做那么，你应该看到“ny”。当然，我认为你不能在其中键入任何内容，因为它将值设置为“ny”，所以它将始终为“ny”，除非你绑定到onChange，并在每次键入字母时将值重置为其他值。我明白了。有机会我会尝试。如果我想在更改时绑定，正确的语法是什么通常，对于输入，您会执行类似的操作，但如果查看库的源代码，您会看到它显式地将输入的onChange绑定到field.onChange，所以您要做的就是执行类似的操作。老实说，对于库来说，这是一种非常奇怪的方法，但事实就是这样。

<input
  value={ this.state.text }
  onChange={ this.onInputChange }
/>