时间戳

首页 > 解决方案 > 从文本字段更新头像值

reactjs - 从文本字段更新头像值

问题描述

我对 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})}
   />

我知道这对于专家来说是个愚蠢的问题，但就我而言，我正在努力解决这个问题。请帮助我摆脱这个问题。

标签： reactjsavatar

解决方案

将状态移动到您的App组件。Avatar并且Login应该是一个无状态组件。然后，您可以将函数作为道具传递给Login，并name从状态传递给Avatar组件。像这样的东西（未测试，因为我没有这些组件的代码；））：

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}
  />
);

并在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>
);

推荐阅读