Javascript 读取两个输入字符串并将其合并

我正在编写一个react组件，它读取用户的名字和第二个名字，然后为他们生成随机用户名

class App extends Component {
  render() {
    return (
      <div className="App">
        First name:<br/>
        <input type="text"></input><br/>
        Last name:<br/>
        <input type="text"></input><br/>
        <button type="button">make a username</button>
        <p>{generateUN('fname','lname')}</p>
      </div>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
名字：



姓氏：



创建用户名
{generateUN（'fname'，'lname'）}

);
}
}

---

触发按钮后，如何将输入字段中的值传递给函数？

您可以使用内联onClick或eventlistener

 First name:<br/>
    <input type="text" id='btn1'></input><br/>
    Last name:<br/>
    <input type="text" id='btn2'></input><br/>
 <button id='mybutton' onClick="myRandomFunction(getElementById(btn1).value,getElementById(btn2).value)" >make a username</button>

名字：



姓氏：



创建用户名

或

getElementById（'mybutton'）。addEventListener（“单击”，myRandomFunction（getElementById（btn1）.value，getElementById（btn2）.value）；

您可以使用state创建用户名，下面是一个小示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fn : '',
      ln : ''
    }
  }

  // makeUsername creates
  // the username based on the fn and ln
  // provided in the inputs
  makeUsername () {
    const {fn, ln} = this.state;
    // if either fn or ln is not provided, do nothing
    if (!fn || !ln) return;

    this.setState({
      username : `${fn.trim()}@${ln.trim()}`
    });
  }

  // createChangeHandleris a curried function to specify
  // which piece of state will be modifed
  createChangeHandler (stateKeyToUpdate) {
    return (e) => {
      this.setState({
        [stateKeyToUpdate] : e.target.value
      });
    }
  }

  render () {
    // conditional render
    // if the username exists 
    // then  render the div
    /*{
        username &&
        <div>Your username is {username}</div>

    }*/
    const {fn, ln, username} = this.state;
    return (
      <div>
        <input 
          value={fn}  
          onChange={this.createChangeHandler('fn')}
          />
        <input 
          value={ln}
          onChange={this.createChangeHandler('ln')}
          />
         <button onClick={this.makeUsername.bind(this)}>
           create username
         </button>

         {
           username &&
           <div>Your username is {username}</div>
         }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'))

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
fn:“，
项次：“”
}
}
//makeUsername创建
//基于fn和ln的用户名
//在输入中提供
makeUsername（）{
const{fn，ln}=this.state；
//如果未提供fn或ln，则不执行任何操作
如果（！fn | |！ln）返回；
这是我的国家({
用户名：`${fn.trim（）}@${ln.trim（）}`
});
}
//CreateChangeHandler是一个用于指定
//哪个州将被修改
createChangeHandler（stateKeyToUpdate）{
返回（e）=>{
这是我的国家({
[stateKeyToUpdate]：e.target.value
});
}
}
渲染（）{
//条件渲染
//如果用户名存在
//然后渲染div
/*{
用户名&&
您的用户名是{username}
}*/
const{fn，ln，username}=this.state；
返回(
创建用户名
{
用户名&&
您的用户名是{username}
}
);
}
}
ReactDOM.render（
您不应该在
render
中生成函数（即使用
bind
或通过调用
createChangeHandler
），因为这会在不必要的时候强制重新渲染。对于这种简单的情况，这可能不会导致性能问题，但仍然是一种很好的做法。请参阅
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fn : '',
      ln : ''
    }
  }

  // makeUsername creates
  // the username based on the fn and ln
  // provided in the inputs
  makeUsername () {
    const {fn, ln} = this.state;
    // if either fn or ln is not provided, do nothing
    if (!fn || !ln) return;

    this.setState({
      username : `${fn.trim()}@${ln.trim()}`
    });
  }

  // createChangeHandleris a curried function to specify
  // which piece of state will be modifed
  createChangeHandler (stateKeyToUpdate) {
    return (e) => {
      this.setState({
        [stateKeyToUpdate] : e.target.value
      });
    }
  }

  render () {
    // conditional render
    // if the username exists 
    // then  render the div
    /*{
        username &&
        <div>Your username is {username}</div>

    }*/
    const {fn, ln, username} = this.state;
    return (
      <div>
        <input 
          value={fn}  
          onChange={this.createChangeHandler('fn')}
          />
        <input 
          value={ln}
          onChange={this.createChangeHandler('ln')}
          />
         <button onClick={this.makeUsername.bind(this)}>
           create username
         </button>

         {
           username &&
           <div>Your username is {username}</div>
         }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'))