React.js - 如何設置表單提交狀態？

Question

新手反應問題 - 我已經弄糊塗了，試圖按照文檔。

我想要一個簡單的文本輸入，在按鈕單擊時，顯示窗體下方的輸入值。很簡單，對吧？

這是我的組件至今：

export default class TextInput extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    this.setState({ value: event.target.value }); 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
     <label> 
      <input type="text" value='' /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
     <p>{ this.state.value }</p> 
     </div> 
    ); 
    } 
} 

然而，這並不在所有的工作 - 形式不顯示任何內容，當用戶類型。

我在做什麼錯？

Answer 1

變化：

您需要從輸入元素刪除value=''否則它不會讓你輸入任何東西，你不使用任何的onChange功能也。使用元件的

方式：

Controlled Component:定義的onChange函數和value屬性和更新變更功能內部的值。

Uncontrolled Component:不要定義value屬性，請使用ref來獲取元素的值。

2.使用ref與輸入元素來獲取它的值在onSubmit函數。

檢查：

class TextInput extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {value: ''}; 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    handleSubmit(event) { 
 
    event.preventDefault(); 
 
    this.setState({ value: this.element.value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <form onSubmit={this.handleSubmit}> 
 
     <label> 
 
      <input type="text" ref={el => this.element = el} /> 
 
     </label> 
 
     <input type="submit" value="Submit" /> 
 
     </form> 
 
     <p>{ this.state.value }</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<TextInput/>, document.getElementById('app'))

<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> 
 

 
<div id='app'/>

Answer 2

您的問題是

<input type="text" value='' /> 

取出值

<input type="text" /> 

「值」將內容設置爲對每一個渲染

Answer 3

一個空字符串，您需要有一個可控輸入，您將保存該值作爲用戶鍵入到文本字段中，然後在提交您可以獲取數據表單的狀態。

export default class TextInput extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    onChange = (event) => this.setState({ value: event.target.value }); 

    handleSubmit(event) { 
    event.preventDefault(); 
    //this.setState({ value: event.target.value }); 
    consoole.log(this.state.value); 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
     <label> 
      <input type="text" value={this.state.value} onChange={this.onChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
     <p>{ this.state.value }</p> 
     </div> 
    ); 
    } 
} 

這是使用受控組件獲取用戶輸入的傳統方式。

Answer 4

當使用手柄提交功能，event.target是表單元素，它有沒有價值，所以沒有設置。處理這個問題的「反應方式」是使用稱爲「受控輸入」的東西。看看我如何與你的代碼實現它們：

export default class TextInput extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     input: '', 
     value: '' 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.updateInput = this.updateInput.bind(this); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    this.setState({ value: this.state.input }); 
    } 

    updateInput(event) { 
    this.setState({input: event.target.value}); 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
     <label> 
      <input type="text" value={this.state.input} onChange={this.updateInput} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
     <p>{ this.state.value }</p> 
     </div> 
    ); 
    } 
} 

尤其要注意輸入的新的價值，我已經連接到它的變化處理。