如何<button>在React.js中</button>使用<button>標簽</button>存儲和傳遞用戶輸入值<button>？</button>

Question

因此，我試圖從用戶那里獲取值並將其顯示在屏幕上，但是看來我的代碼沒有將值從Input類傳遞到主類。 當我單擊提交時，什么都沒有發生。 這是我的主要.js類的代碼：

import React, { Component } from 'react';
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {

  state = {
    userName : 'Masood'
  }

  manipulator = (event) => {
    this.setState(
      {userName : event.target.value}
    )
  }


  render() {
    return (
      <div>
        <UserOutput userName = {this.state.userName}/>
        <UserInput changed={this.manipulator}/>
      </div>
    );
  }
}

export default App;

這是Input類的代碼：

import React from 'react'

const userInput = (props) => {
    return(
        <div>
        <form onSubmit={props.changed}>
            <input style={style} type="text" value={props.userName}/>  
            <input type="submit" value="Submit"/>   
        </form>
        </div>
    )
};

export default userInput;

這是輸出類：

import React from 'react'

    const userOutput = (props) => {
        return(
        <div>
         <p> Here is a test from output file.</p>
         <p>Username is {props.userName}</p>
        </div>
        )
    };

export default userOutput;

很抱歉，代碼太長，問題太小，但我認為我應該包括所有內容。

Answer 1

我認為主要問題是您嘗試提交一個值，但是如果console.log event.target.value等於null。

當您更改輸入中的文本fe時，應該為onChange提供事件處理程序：

const UserInput = props => {
  return (
    <div>
      <form onSubmit={props.onSubmit}>
        <input type="text" value={props.userName} onChange={props.changed} />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
};

希望這對您有所幫助： https : //reactjs.org/docs/forms.html