ReactJS：如何正确使用此textInput组件？

Question

Hi I'm super new to ReactJs. I'm finding the docs to be difficult to digest, as such I'm having trouble with something very basic. I'm trying to use this textinput component in my form and I don't know how to set value dynamically.

This is the TextInput component

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

This is where I'm using it

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>

Inside where I use TextInput, I'm trying to set a default value. So something like this:

location{ value:'ny' } So if it exists, it'll populate ny, and if not it'll be blank.

I tried

<TextInput value={value}> 

It just doesn't run. When I remove value = value the page renders but without the data I need of course.

I know I have to (or at least i think i know) Set the state or something and bind it to my profileHome component...I just don't know how. If anyone can show me how to do this I would be so happy. And if possible, throw in a good resource for me to look at. I feel like angular was so much easier to pick up.

Answer 1

Have you tried using defaultValue ?

<TextInput defaultValue={value}> 

This will render whatever is passed as a defaultValue, however you will still need to bind the value and onChange to reflect user interaction since you are using <input> as a controlled component. See React's Controlled Components for more information.

Answer 2

Here's one way to go about it.

First, create the TextInput class and set your initial state of the text value in the constructor function and bind the correct 'this' context to the method you're going to create next:

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

Then, create a method of the TextInput class that handles changes to the value of the input and sets the state accordingly:

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

Finally, in the render function, your input field would look like this (plus whatever other props you want to give it):

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

As for resources, the React documentation is pretty fantastic and I found Stephen Grider's course on udemy to be the best tutorial on React: https://www.udemy.com/react-redux/learn/#/ . Just be sure to understand the fundamentals of React (state and props) before moving on to the Redux part of the tutorial - where things get really fun, but definitely more complex.