Как получить Material-UI's <TextField/> для правильного возврата с ref = '' как <input/> в ReactJS?

Question

С следующим способом:

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

Я пытаюсь получить материал-UI, <TextField/> правильно вернуть входной текст с реф вроде <input/> может с <button/> вызывая его:

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

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

И я попытался следующее с <TextField/>, но оно возвращается как undefined. Как я могу получить его, чтобы вернуть введенный текст правильно, как <input/> выше?

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

Answer 1

Вы должны использовать OnChange = {}, чтобы получить значение:

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

<TextField 
    onChange={this._onChange} 
/> 

Answer 2

Я хотел бы предложить этот подход:

Настройку текстового поля с функцией value и onChange, которые зацепили в самом редуксе, где функция onChange просто обновляет value.

Таким образом, вы бы что-то вроде этого:

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

Где textFieldChange это действие, которое просто обновляет textFieldValue. Большинство форм в redux будут работать примерно так. Имейте в виду, что имена, которые я придумал для этих реквизитов и действий, - это только пример. Если у вас есть большая форма вы можете рассмотреть есть часть государственного дерева, посвященное самая, где у вас есть форма:

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

Мне нравится делать это с Redux, потому что я могу сделать эту форму архитектор части государства чтобы выглядеть как полезная информация json, куда бы я ни отправил ее, поэтому я могу просто отправить форму, я хочу ее отправить.

В любом случае, к этому примеру. Когда вы нажмете свой handleClick. Все, что вам нужно сделать, это получить значение:

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

Поскольку текстовое поле обновляется при каждом изменении, у вас всегда есть доступ к нему в вашем государстве. Это также дает вам гибкость в отношении подхода refs, потому что, если вы используете refs, вам будет намного сложнее получить доступ к этой форме в других компонентах. При таком подходе вся информация находится в вашем состоянии, поэтому вы можете получить к ней доступ в любое время, пока вы управляете своими реквизитами.

Answer 3

Вот лучшее решение, чем OnChange событие, мы получаем непосредственно значение ввода созданного материала-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> 
    )} 

надеюсь, что это помогает.