Question

我对React.JS以及JS都是新手。我必须从文本字段更新头像值。这只是一个小型演示项目。我的目标如下：

这意味着如果有人在

中输入了文字

昵称

然后必须更新头像文本。我在App.js中的渲染方法如下

 return (
      <div className="App">
                <div style={avatarParentContainer}>
                  <div style={divStyleAvatar}>
                  </div>
                  <span style={avatarContainer}>
                    {avatar}
                  </span> 
                </div>
                 <div>
                  <Login/>
                </div>     
      </div>
    );

下面是我的头像

avatar= <Avatar 
      name={this.setState({avatarname:''})} 
      size="200"  
      round={true} 
      style={avatarClass}
      />;

与上面的代码一样，我有一个独立的组件

登录

此登录组件具有“昵称”字段，如下所示：

 <TextField
   hintText="Enter your Nick name"
   floatingLabelText="Nick Name"
   onChange = {(event,newValue)=>this.setState({nickname:newValue})}
   />

我知道这对专家人员来说是一个愚蠢的问题，但就我而言，我正在为此而苦苦挣扎。请帮助我摆脱这个问题。

Answer 1

Move state to your App component. Avatar and Login should be a stateless components. Then you can pass function as a prop to Login, and name from state to Avatar component. Something like this (not tested, because I don't have code of these comopnents ;) ):

const Login = ({ onChange }) => (
  <TextField
    hintText="Enter your Nick name"
    floatingLabelText="Nick Name"
    onChange = {(event, newValue) => onChange(newValue)}
  />
);

const Avatar = ({ name }) => (
  <Avatar 
    name={name} 
    size="200"  
    round={true} 
    style={avatarClass}
  />
);

And in App:

return (
  <div className="App">
    <div style={avatarParentContainer}>
      <div style={divStyleAvatar}>
        <span style={avatarContainer}>
          <Avatar name={this.state.avatarname} />
        </span> 
      </div>
    <div>
    <Login onChange={avatarname => this.setState({avatarname})} />   
  </div>
);

从文本字段更新头像值

1 个答案: