React無狀態組件this.refs..value？

Question

我不知道我是否正確地做到了這一點...... 如果我想從輸入中獲取值，我使用this.refs.whatever.value.trim（），但如果該輸入是無狀態函數組件我確實檢索onSubmit的值？

我知道這是不正確的現在研究後，但你應該如何從這些輸入字段中獲得價值？

import React, {Component} from 'react' 

import {InputField} from '../components/forms/InputField' 
import {Button} from '../components/forms/Button' 

export default class SignupWrapper extends Component { 
    _handleSubmit(e) { 
    e.preventDefault(); 
    const email = this.refs.email.value.trim(); 
    const password = this.refs.password.value.trim(); 
    const confirm = this.refs.confirm.value.trim(); 
    console.log({email, password, confirm}); 
    } 

    render() { 
    return (
     <form id="application-signup" onSubmit={this._handleSubmit.bind(this)}> 
     <InputField type={'email'} name={'email'} text={'email'} 
        helpBlock={'email is required'} ref="email" /> 
     <InputField type={'password'} name={'password'} text={'password'} 
        helpBlock={'password is required'} ref="password" /> 
     <InputField type={'password'} name={'confirm'} text={'confirm password'} 
        helpBlock={'password confirmation is required'} ref="confirm" /> 
     <Button type={'submit'} className={'btn btn-primary'} text={'signup'} /> 
     </form> 
    ) 
    } 
} 

這是無狀態的inputfield

import React from 'react' 

export const InputField = (props) => (
    <div className="form-group col-xs-12"> 
    <label htmlFor={props.name}>{props.text}</label> 
    <input type={props.type} name={props.name} className="form-control" 
      data-stripe={props.stripe} /> 
    <span className="help-block">{props.helpBlock}</span> 
    </div> 
) 

Answer 1

編輯：看起來這是不是問題了，因爲關於如何處理這種情況下新的想法出現了，因爲這個答案寫。 請參閱inanc的答案，而不是這一個。

Refs在無狀態組件中不可用。 從React Docs：

因爲無狀態的功能，沒有支持的實例，您不能在裁判附加到一個無狀態的功能成分。通常情況下這不是問題，因爲無狀態函數不提供強制性的API。如果沒有強制性的API，無論如何你都無法對一個實例做些什麼。但是，如果用戶想要查找無狀態函數組件的DOM節點，則它們必須將組件包裝在有狀態組件（例如，ES6類組件）中，並將該ref附加到有狀態包裝組件。

Answer 2

您可以在無狀態組件中使用ref。

這裏還有我的example fiddle它向你展示了它是如何工作的。

import React from 'react' 

export default ({ onChange }) => { 
    let cityInput 

    const onSubmit = e => { 
    e.preventDefault() 
    onChange(cityInput.value) 
    } 

    return (
    <form onSubmit={ onSubmit }> 
     <input type='text' placeholder='Enter City Name' 
     ref={ el => cityInput = el } /> 
     <button>Go!</button> 
    </form> 
) 
} 

Answer 3

@inanc，顯示不錯的方法，但我提出了另一種使用事件目標來獲取DOM元素引用的方法。在使用表單元素時，可以命名輸入元素並使用它來訪問表單對象。

const onSubmit = fn => e => { 
    e.preventDefault() 
    const city = e.target.city.value // Access elements through `form` 
    if (city) { 
    fn(city) 
    } 
} 

const MyComponent = ({ 
    onChange 
}) => { 
    return ( 
    <div> 
     <form onSubmit={onSubmit(onChange)}> 
     <input type='text' name='city' placeholder='Enter City Name' /> 
     <button>Go!</button> 
     </form> 
    </div> 
) 
} 

Answer 4

如今，你想要avoid to use the ref attribute從輸入字段獲得值。相反，你應該使用React的本地狀態。 ref屬性僅保留一個few use cases：

• 管理焦點，文本選擇，或媒體播放
• 與第三方DOM庫集成
• 觸發勢在必行動畫

Answer 5

你可以用」 t在無狀態的反應組件中使用ref（+ a給Moti Azu從他的文檔中摘錄）。

您可以使用多種技術來得到的東西進/出無狀態的組件（不使用參考或使用類組件），我創建了下面的代碼片段來說明

1. 您如何傳遞的東西變成無國籍組件（標籤道具在父組件中靜態設置）。
2. 如何從一個無狀態的組件得到的東西不使用裁判的（輸入組件）

嘗試一下&讓我知道，如果你仍然有問題，享受...

// Stateless Component (just a <div> component with prop) 
 
const StatelessComponent = props => (
 
    <div>{props.label}</div> 
 
); 
 

 
// Stateless input Component 
 
const InputComponent = props => { 
 
    return (
 
    <input 
 
     value={props.name} 
 
     onChange={props.handleChange} 
 
    /> 
 
); 
 
}; 
 

 
// Parent Class Component 
 
class ParentComponent extends React.Component { 
 
    state = { 
 
    firstName: "HELCODE"  
 
    }; 
 

 
    handleChange = event => { 
 
    this.setState({ 
 
     firstName: event.target.value, 
 
    }); 
 
    }; 
 
    
 
    render() { 
 
    const {title} = this.props; 
 
    console.log("rendered"); 
 
    return (
 
     <div> 
 
     <h3>{title}</h3> 
 
     <StatelessComponent 
 
      label="This is a label passed to a stateless component as prop" 
 
     /> 
 
     <br/> 
 
     <InputComponent 
 
      name={this.state.firstName} 
 
      handleChange={this.handleChange} 
 
     /> 
 
     
 
     <p>{this.state.firstName}{this.state.lastName} can read stuff from stateless components withough Ref using States</p> 
 
     <br/> 
 
     
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
// Render it 
 
ReactDOM.render(
 
    <ParentComponent title="Parent Component" />, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 6

只需添加一個解決方案，使用反應語意UI任何人。

https://react.semantic-ui.com/addons/ref

你可以簡單地包裹無狀態的功能組件在此Ref組件以獲得DOM節點。

（非常有用的應對Sidebar.Pushable的滾動位置！）