如何获得Material-UI的 <TextField/> 用ref =&#39;&#39;正确返回 <input/> 在ReactJS中？

Question

With the following method:

  handleClick(event) {
    const inputText = this.refs.inputText
    console.log(inputText.value.trim())
  }

I am trying to get Material-UI's <TextField/> to return the input text correctly with ref like the <input/> can with <button/> triggering it:

  <input
    className='form-control'
    placeholder='Input Text'
    ref='inputText'
    type='text'
  />

  <button
    onClick={(event) => this.handleClick(event)}
  >

And I attempted the following with <TextField/> , but it returns as undefined . How can I get it to return inputted text correctly like the <input/> above?

  <TextField
    hint='Enter text'
    className='form-control'
    ref='inputText'
    type='text'
  />

Answer 1

I would suggest this approach:

Set up your textfield with a value and onChange function that are hooked into redux itself, where the onChange function just updates the value .

So you'd have something like this :

   <TextField
       value={this.props.textFieldValue}
       onChange={this.props.textFieldChange}

Where the textFieldChange is an action that simply updates the textFieldValue . Most forms in redux will work something like this. Keep in mind the names i made up for those props and action are just for example. If you have a big form you might want to consider have part of the state tree dedicated to the form itself where you have :

state: {
    form: {
       textField:   ...your textfield value here,
       name:  ...,
       whateverElse: ...
   }
 };

I like doing this with redux because I can make that architect form part of the state to look like the json payload of wherever I'm sending it to, so there I can just send the form went I want to send it.

Anyways, back to this example. When you click your handleClick now. All you need to do is this to get the value:

handleClick(event) {
   console.log(this.props.textFieldValue.trim());
}

Because the textfield is updated with every change, you always have access to it in your state. This also gives you flexibility over the refs approach, because if you use refs you will have a lot harder of a time getting access to that form in other components. With this approach, all the information is on your state so you can access it anytime, as long as you manage your props.

Answer 2

You should use the onChange={} to get the value:

_onChange = (e) => {
    console.log(e.target.value);
}

<TextField
    onChange={this._onChange}
/>

Answer 3

Here's a better solution than using onchange event, we get directly the value of the input created by material-ui textField :

  create(e) {
    e.preventDefault();
    let name = this.refs.inputText.input.value;
    alert(name);
  }

  constructor(){
    super();
    this.create = this.create.bind(this);
  }

  render() {
    return (
          <form>
            <TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/>
            <RaisedButton label="Create" onClick={this.create} primary={true} />
          </form>
    )}

hope this helps.