从文本字段更新头像值

Question

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

表示如果有人在

中输入了Text

Nick name

那么必须更新头像文字。我在 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}
      />;

在上面的代码中，我有一个单独的组件

Login

此登录组件的昵称字段如下：

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

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

Answer 1

将状态移动到您的 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>
);

从文本字段更新头像值

Update Avatar value from Text feild

avatar

reactjs