代码之家 › 专栏 › 技术社区 › DJhon

从文本feild更新avatar值

avatar reactjs

0

DJhon · 技术社区 · 6 年前

我对react.js很陌生,对js也很陌生。我必须从文本字段更新avatar值。这只是一个小的演示项目。我的目标如下:

这意味着如果有人输入了文本

< Buff行情>

昵称

< /块引用>

然后必须更新虚拟人物文本。我在app.js中的呈现方法如下

返回(
<div classname=“app”>
<DIV style=avataParentContainer>
<div style=divStyleavatar>
&L/DIV & GT;
<SPAN style=虚拟容器>
{化身}
L//Stand & Gt;
&L/DIV & GT;
和DIV & GT;
登录;
&L/DIV & GT;
&L/DIV & GT;
;
< /代码> 

下面是我的化身

avatar=<avatar
name=this.setState(avatarname:“”)
大小=“200”
圆= {true}
style=虚拟人物类
//;
< /代码> 

和上面的代码一样,我有一个单独的组件

< Buff行情>
登录< /P>
< /块引用>

此登录组件的nick name字段如下:

<textfield
hinttext=“输入您的昵称”
floatingLabelText=“昵称”
onchange=(event,newvalue)=>this.setState(昵称:newvalue)
/gt;
< /代码> 

我知道这对专家来说是个愚蠢的问题,但在我的例子中,我正在努力解决它。请帮助我解决这个问题。



这意味着如果有人输入了文本


昵称


然后必须更新虚拟人物文本。我在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}
      />;


和上面的代码一样,我有一个单独的组件


登录


此登录组件的nick name字段如下:

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


我知道这对专家来说是个愚蠢的问题,但在我的例子中,我正在努力解决它。请帮我解决这个问题。

1 回复 | 直到 6 年前

1

mwl 6 年前

将状态移动到 App 组件。 Avatar 和 Login 应该是无状态组件。然后你可以把函数作为一个道具传递给 登录 和 name 从状态到 化身 组件。类似这样的东西(没有测试,因为我没有这些共气体的代码;):

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

而在 应用程序 :

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