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

我认为主要问题是您尝试提交值，但如果- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView.contentOffset.y < -30.0) { [UIView animateWithDuration:0.25 animations:^{ self.collectionView.contentInset = UIEdgeInsetsZero; }]; } } console.log它等于null。

当您更改输入中的文本时，您应该有`onChange的事件处理程序，f.e：

event.target.value

希望这会有所帮助：https://reactjs.org/docs/forms.html

如何使用React.js中的<button>标签存储和传递用户输入值？

1 个答案: