Question

嗨，我是ReactJs的新手。我发现文档难以消化，因此我遇到了一些非常基本的问题。我试图在我的表单中使用这个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 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>

在我使用TextInput的地方，我正在尝试设置默认值。所以像这样：

位置{ 值： 'NY' } 所以，如果它存在，它将填充ny，如果不存在，它将是空白的。

我试过

<TextInput value={value}>

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

我知道我必须（或者至少我认为我知道）设置状态或其他东西并将其绑定到我的profileHome组件......我只是不知道如何。如果有人能告诉我如何做到这一点，我会很高兴。如果可能的话，给我一个很好的资源来看看。我觉得角度更容易接受。

Answer 1

您是否尝试过使用defaultValue？

<TextInput defaultValue={value}>

这将呈现作为defaultValue传递的任何内容，但是您仍然需要绑定value和onChange以反映用户交互，因为您使用<input>作为受控组件。有关详细信息，请参阅React的Controlled Components。

Answer 2

这是解决问题的一种方法。

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

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 });
}

最后，在渲染功能中，您的输入字段将如下所示（加上您想要提供的任何其他道具）：

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

至于资源，React文档非常精彩，我发现Stephen Grider关于udemy的课程是关于React的最佳教程：https://www.udemy.com/react-redux/learn/#/。在进入教程的Redux部分之前，一定要了解React（状态和道具）的基础知识 - 事情变得非常有趣，但绝对更复杂。

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

2 个答案: