javascript - 读取两个输入字符串并连接它们

Question

我正在编写一个 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>
    );
  }
}

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

Answer 1

你可以使用状态来创建用户名，这里是一个小例子

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

还有一个 demo